title: How do i change background color of div using Javascript function
body: <p>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.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Comment Form&lt;/title&gt;
   &lt;link rel="stylesheet" type="text/css" media="screen" href="form1.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form&gt;
            &lt;div class="box"&gt;
              &lt;h1&gt;Contact Form&lt;/h1&gt;
              &lt;label&gt;
                 &lt;span&gt;First Name&lt;/span&gt;&lt;span class="req"&gt;*&lt;/span&gt;
                 &lt;input type="text" class="input_text" name="name" id="FirstName"/&gt;
              &lt;/label&gt;&lt;br /&gt;
               &lt;label&gt;
                 &lt;span&gt;Last Name&lt;/span&gt;&lt;span class="req"&gt;*&lt;/span&gt;
                 &lt;input type="text" class="input_text" name="LastName" id="LastName"/&gt;
              &lt;/label&gt;&lt;br /&gt;
              &lt;label&gt;
               &lt;span&gt;Address&lt;/span&gt;&lt;span class="req"&gt;*&lt;/span&gt;
                 &lt;input type="text" class="input_text" name="Address" id="Address"/&gt;
              &lt;/label&gt;&lt;br /&gt;
               &lt;label&gt;
                  &lt;span&gt;City&lt;/span&gt;&lt;span class="req"&gt;*&lt;/span&gt;
                  &lt;input type="text" class="input_text" name="City" id="City"/&gt;
              &lt;/label&gt;&lt;br /&gt;
              &lt;label&gt;
               &lt;span&gt;State(XX)&lt;/span&gt;&lt;span class="req"&gt;*&lt;/span&gt;
                 &lt;input type="text" class="input_text" name="State" id="State"/&gt;
              &lt;/label&gt;&lt;br /&gt;
              &lt;label&gt;
               &lt;span&gt;Zipcode(XXXXXX)&lt;/span&gt;&lt;span class="req"&gt;*&lt;/span&gt;
                 &lt;input type="text" class="input_text" name="Zipcode" id="Zipcode"/&gt;
              &lt;/label&gt;&lt;br /&gt;
              &lt;label&gt;
                  &lt;span&gt;Comment&lt;/span&gt;&lt;span class="req"&gt;*&lt;/span&gt;
                  &lt;textarea name="text" class="input_text"rows="5" cols="25" &gt;&lt;/textarea&gt;
  
              &lt;/label&gt;&lt;br /&gt;
              &lt;label&gt;
              &lt;span&gt;I agree to the Following Condition&lt;/span&gt; &lt;input type="checkbox" id="condition" name="terms" value="condition"/&gt;
              &lt;/label&gt;&lt;br /&gt;
  
              &lt;label&gt;Make the background Green for Xmas!&lt;input type="checkbox" id="color1" name="color1"  value="color1" onclick="changeBGC('green')"&gt;&lt;/label&gt;      
           &lt;/div&gt;
           &lt;script&gt;
           function changeBGC(color)
           { 
              alert("in the function");
              document.body.style.backgroundColor = color;
              div.style.backgroundColor = color;\\ NOT WORKING
             }
             &lt;/script&gt;
      &lt;/form&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>CSS file:</p>
  
  <pre><code>*{ 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;
  }
  </code></pre>