How do i change background color of div using Javascript function

Question

I am trying to change background color when a checkbox is checked using the following javascript function: I could change background color of body but not the form(div)'s background color.Please help me fix it.

<html>
<head>
<title>Comment Form</title>
 <link rel="stylesheet" type="text/css" media="screen" href="form1.css" />
</head>
<body>
<form>
          <div class="box">
            <h1>Contact Form</h1>
            <label>
               <span>First Name</span><span class="req">*</span>
               <input type="text" class="input_text" name="name" id="FirstName"/>
            </label><br />
             <label>
               <span>Last Name</span><span class="req">*</span>
               <input type="text" class="input_text" name="LastName" id="LastName"/>
            </label><br />
            <label>
             <span>Address</span><span class="req">*</span>
               <input type="text" class="input_text" name="Address" id="Address"/>
            </label><br />
             <label>
                <span>City</span><span class="req">*</span>
                <input type="text" class="input_text" name="City" id="City"/>
            </label><br />
            <label>
             <span>State(XX)</span><span class="req">*</span>
               <input type="text" class="input_text" name="State" id="State"/>
            </label><br />
            <label>
             <span>Zipcode(XXXXXX)</span><span class="req">*</span>
               <input type="text" class="input_text" name="Zipcode" id="Zipcode"/>
            </label><br />
            <label>
                <span>Comment</span><span class="req">*</span>
                <textarea name="text" class="input_text"rows="5" cols="25" ></textarea>

            </label><br />
            <label>
            <span>I agree to the Following Condition</span> <input type="checkbox" id="condition" name="terms" value="condition"/>
            </label><br />

            <label>Make the background Green for Xmas!<input type="checkbox" id="color1" name="color1"  value="color1" onclick="changeBGC('green')"></label>      
         </div>
         <script>
         function changeBGC(color)
         { 
            alert("in the function");
            document.body.style.backgroundColor = color;
            div.style.backgroundColor = color;\\ NOT WORKING
           }
           </script>
    </form>
    </body>
    </html>

CSS file:

*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:white;}
form,input,select,textarea{margin:0; padding:0; color:black;}

div.box{
margin:0 auto;
width:500px;
background:white;
position:relative;
border:none;
}

div.box h1 { 
color:red;
font-size:18px;
padding:5px 0 5px 5px;
border:none;

}

div.box label {
width:100%;
display: block;
background:white;
border:none;

padding:10px 0 10px 0;
}

div.box label span {
display: block;

font-size:15px;
float:left;
width:100px;
text-align:auto;
padding:0px 0px 0 0;
color:red;
}

div.box.input_text {
padding:10px 10px;
width:150px;
background:Black;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}

div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}

div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}

demee · Accepted Answer · 2012-05-06 04:36:40Z

1

The best option would be to create additional class that would change color of your div.

.diffrentColor {
    background-color: blue; /* for example blue or #00f*/ 
}

then you could do document.getElementsByClassName('box')[0].className += " diffrentColor";

Quick win:

document.getElementsByClassName('box')[0].style.backgroundColor = color;

answered May 6, 2012 at 4:36

demee

5826 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do i change background color of div using Javascript function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related