JavaScript Program to Change Background Color Using Checkbox Selection

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