title: Java script changing color of element by ID
body: <p>Hi there I'm trying to do validation for  a form I am working on, and I have written a function and used </p>
  
  <pre><code>document.getElementById("span_trav_emer_med_insur").style.backgroundColor ='#FFFFFF';
  </code></pre>
  
  <p>I have tested my function to display an alert message box, for debugging purposes when 'trav_emer_med_insur' is checked the message box is displayed.  I have checked here and on countless other sites and they all say <code>getElementById.style.backgroundColor = 'color';</code> is the method to achieve what I am looking for.  I don't understand at this point why it is not working, everything appears correct.</p>
  
  <p>Here is the starting, pertinent part of my function:</p>
  
  <pre><code>function validatePlanTypes(form)    {
      var error = "";
  
          if (form.trav_emer_med_insur.checked)   {
              document.getElementById("span_trav_emer_med_insur").style.backgroundColor = '#FFFFFF';
              if (!form.trav_emer_med_insur_opt1.checked || !form.trav_emer_med_insur_opt2.checked || !form.trav_emer_med_insur_opt3.checked || !form.trav_emer_med_insur_opt4.checked)   {
                  form.trav_emer_med_insur_opt1.style.backgroundColor = 'Yellow';
                  form.trav_emer_med_insur_opt2.style.backgroundColor = 'Yellow';
                  form.trav_emer_med_insur_opt3.style.backgroundColor = 'Yellow';
                  form.trav_emer_med_insur_opt4.style.backgroundColor = 'Yellow';
                  error = "You must pick a plan-type for Travel Emergency Medical insurance, areas with a problem have been highlighted yellow for you.";
              }
  </code></pre>
  
  <p>I am not testing the full function yet, I am only trying to test the very first if statement at this time, as I said the if statement works and alert("bleh"); will display an alert if I check that box</p>
  
  <p>Here is the HTML of the form where I am trying to change the background color of a span element surrounding the checkbox.</p>
  
  <pre><code>&lt;p&gt;&lt;span name="span_trav_emer_med_insur" id="span_trav_emer_med_insur" value="span_trav_emer_med_insur" style=""&gt;&lt;input type="checkbox" name="trav_emer_med_insur" id="trav_emer_med_insur_if"  value="trav_emer_med_insur_if" class="form_elements" onClick="if(this.checked){document.getElementById('trav_emer_med_options').style.display='block';}else{document.getElementById('trav_emer_med_options').style.display='none';}"/&gt;&lt;/span&gt; &lt;!-- Travel Emergency Medical If Box --&gt;
  
                      &lt;label class="form_elements" name="label_for_trav_emer_med_insur_if" id="label_for_trav_emer_med_insur_if"&gt;&amp;nbsp;&amp;nbsp;Travel Emergency Medical Insurance&amp;nbsp;&lt;em&gt;(expands when checked)&lt;/em&gt;.&lt;/label&gt;&lt;/p&gt;
                      &lt;p&gt;
  
                      &lt;div id="trav_emer_med_options" name="trav_emer_med_options" class="questions_hidden"&gt;
  </code></pre>
  
  <p>I have also tried</p>
  
  <pre><code>form.span_trav_emer_med_insur.style.backgroundColor = '#FFFFFF';
  </code></pre>
  
  <p>Also to no avail, I'm really stumped here, the code looks identical to what I see all over the net.  Someone please tell me what I am missing.</p>
  
  <p>Thanks,
  -Sean</p>
  
  <p>Edit - Just to verify:</p>
  
  <pre><code>if (form.trav_emer_med_insur.checked)   {
              alert("bleh");
  </code></pre>
  
  <p>instead of</p>
  
  <pre><code>if (form.trav_emer_med_insur.checked)   {
              document.getElementById("span_trav_emer_med_insur").style.backgroundColor = '#FFFFFF';
  </code></pre>
  
  <p>Does work, so the if statement or function is not a problem.</p>
  
  <p>Complete file here - with getelementbyID not working - <a href="http://hotfile.com/dl/135598683/93484d4/general2.html" rel="nofollow">http://hotfile.com/dl/135598683/93484d4/general2.html</a></p>
  
  <p>Complete file here with alert('bleh') WORKING - 
  <a href="http://hotfile.com/dl/135598746/dc9e14b/general23.html" rel="nofollow">http://hotfile.com/dl/135598746/dc9e14b/general23.html</a></p>
  
  <p>Working PHP code showing exactly what I'm trying to do (minus the page reload part):</p>
  
  <pre><code>    // Check if Emergency Medical is selected.
  if (isset($_POST['trav_emer_med_insur']))   { 
  
      // If Emergency Medical is selected, then check to see if an option has been selected
      if (isset($_POST['trav_emer_med_insur_opt1']) or isset($_POST['trav_emer_med_insur_opt2']) or isset($_POST['trav_emer_med_insur_opt3']) or isset($_POST['trav_emer_med_insur_opt4']))   {
  
      $SQLString = $SQLString . "emer_med, emer_med_opt1, emer_med_opt2, emer_med_opt3, emer_med_opt4";
  
      }
  
      // If no option is selected display error message   
      else    {
  
          ++$ErrCount;
          $Errors[$ErrCount] = "You selected interest in Travel Emergency Medical Insurance  but did  not select a plan-type for it";
  
      }
  }
  
  // Check if All-Inclusive Insurance is selected.
  elseif (isset($_POST['allinc_insur']))  {
  
      //If All-Inclusive Insurance is selected, then check to see if an option has been selected
      if (isset($_POST['allinc_insur_opt1']) or isset($_POST['allinc_insur_opt2']))   {
  
      }   
  
      //If no option is selected display error message
      else    {
  
          ++$ErrCount;
          $Errors[$ErrCount] = "You have selected interest in All-Inclusive Insurance but did not select a plan-type for it";
  
      }
  }
  
  // Check if Cancellation Insurance is selected.
  elseif (isset($_POST['cancel_insur']))  {
  
  
  
  }
  
  // Check if Visitor Insurance is selected.
  elseif (isset($_POST['visitor_insur'])) {
  
      //If Visitor Insurance is selected, then check to see if country is selected.
      if (isset($_POST['country_select']))    {
  
      }   
  
      // If no country selected display error message
      else    {
  
          ++$ErrCount;
          $Errors[$ErrCount]  = "You have selected interest in Visitor Insurance but have not selected a country";
  
      }       
  }
  
  //If no insurane types selected display error.
  else    {
  
      ++$ErrCount;
      $Errors[$ErrCount] = "You haven not selected interest in any insurance plan types";
  
  }
  while ($Count != $Target)   {
      if (checked($QuestionNames[0]) != 1);
      ++$Count;
  }
  </code></pre>