title: How to set the background color of specifc cell in html using javascript?
body: <p>I am trying to set the background color of a cell in the html page from a simple javascript. Below is my html and javascript:</p>
  
  <pre class="lang-html prettyprint-override"><code>
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Example&lt;/title&gt;
  
  &lt;!-- CSS --&gt;
  &lt;style&gt;
  .myTable { 
    width: 100%;
    text-align: left;
    background-color: lemonchiffon;
    border-collapse: collapse; 
    }
  .myTable th { 
    background-color: goldenrod;
    color: white; 
    }
  .myTable td, 
  .myTable th { 
    padding: 10px;
    border: 1px solid goldenrod; 
    }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;meta http-equiv="refresh" content="30"&gt;    
  &lt;script src ="Json_Development_Test.js"&gt;
  &lt;/script&gt;
  
  &lt;!-- HTML --&gt;
  &lt;table class="myTable"&gt;
  
      &lt;tr&gt;
          &lt;th&gt;PROJECT&lt;/th&gt;
          &lt;th&gt;Service&lt;/th&gt;
          &lt;th&gt;PrDC&lt;/th&gt;
          &lt;th&gt;DDC&lt;/th&gt;
          &lt;th&gt;Last Checked Time(IST)&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
  
          &lt;td&gt;
           &lt;div&gt;
            &lt;span id="headerID1"&gt;
             &lt;p&gt;Test&lt;/p&gt;
             &lt;/span&gt;
           &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
           &lt;div&gt;
             &lt;span id="header2"&gt;
             &lt;p&gt;Test2&lt;/p&gt;
             &lt;/span&gt;
           &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
           &lt;div&gt;
             &lt;p&gt;Test3&lt;/p&gt;
           &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
           &lt;div&gt;
             &lt;p&gt;Test4&lt;/p&gt;
           &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
           &lt;div&gt;
             &lt;p&gt;Test5&lt;/p&gt;
           &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>
  window.addEventListener('load', function() {
      console.log('All assets are loaded')
    })
  
  document.getElementById('headerID1').bgColor='#003F87'
  
  </code></pre>
  
  <p><strong>Expected result:</strong></p>
  
  <p>I need to change the background color of the span id "headerID1" and following other span id as well. </p>
  
  <p><strong>Actual result:</strong></p>
  
  <p>The color is not getting changed and instead I am getting the following errors:</p>
  
  <pre><code>HTML1503: Unexpected start tag.
  testDesign.html (26,1)
  
   SCRIPT5007: Unable to get property 'style' of undefined or null reference
  Json_Development_Test.js (4,1)
  
   HTML1512: Unmatched end tag.
  testDesign.html (32,1)
  
   HTML1506: Unexpected token.
  testDesign.html (43,2)
  
  2 HTML1530: Text found within a structural table element. Table text may only be placed inside "caption&gt;", "td&gt;", or "th&gt;" elements.
  </code></pre>
  
  <p>Can anyone help me to resolve this error?</p>