JavaScript Program to Change Background Color Using Checkbox Selection
Write a JavaScript program to change background color using checkbox selection.
Source Code
<html>
<head>
<title>Change background color using Checkbox selection</title>
<script>
function changeColor()
{
var panel = document.getElementById('panel')
var text = "You selected colors: "
var r=0, g=0, b=0;
with(document.forms.myForm)
{
if(red.checked == true)
{
r = 255;
text += "Red";
}
if(green.checked == true)
{
g = 255;
text += ", Green";
}
if(blue.checked == true)
{
b = 255;
text += ", Blue";
}
}
panel.innerHTML = text;
document.body.style.backgroundColor = getRGB(r, g, b)
}
function getRGB(r, g, b)
{
var colorHash = "#"+ ((r==255) ? "FF" : "00") + ((g==255) ? "FF" : "00") + ((b==255) ? "FF" : "00")
return colorHash;
}
</script>
</head>
<body>
<form name="myForm">
<input type="checkbox" name="red" value="Red" onchange="changeColor()"/>Red<br/>
<input type="checkbox" name="green" value="Green" onchange="changeColor()"/>Green<br/>
<input type="checkbox" name="blue" value="Blue" onchange="changeColor()"/>Blue<br/>
<p id="panel">You selected colors: </p>
</form>
</body>
</html>
Output
