CODEWITHSUNDEEP
javascripthtmlhtml-table
hanju
hanju

Reputation: 139

How to set the background color of specifc cell in html using javascript?

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:


<!DOCTYPE html>
<html>
<head>
<title>Example</title>

<!-- CSS -->
<style>
.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; 
  }
</style>
</head>

<body>
<meta http-equiv="refresh" content="30">    
<script src ="Json_Development_Test.js">
</script>

<!-- HTML -->
<table class="myTable">

    <tr>
        <th>PROJECT</th>
        <th>Service</th>
        <th>PrDC</th>
        <th>DDC</th>
        <th>Last Checked Time(IST)</th>
    </tr>
    <tr>

        <td>
         <div>
          <span id="headerID1">
           <p>Test</p>
           </span>
         </div>
        </td>
        <td>
         <div>
           <span id="header2">
           <p>Test2</p>
           </span>
         </div>
        </td>
        <td>
         <div>
           <p>Test3</p>
         </div>
        </td>
        <td>
         <div>
           <p>Test4</p>
         </div>
        </td>
        <td>
         <div>
           <p>Test5</p>
         </div>
        </td>
    </tr>

</table>

</body>
</html>

Javascript


window.addEventListener('load', function() {
    console.log('All assets are loaded')
  })

document.getElementById('headerID1').bgColor='#003F87'

Expected result:

I need to change the background color of the span id "headerID1" and following other span id as well.

Actual result:

The color is not getting changed and instead I am getting the following errors:

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>", "td>", or "th>" elements.

Can anyone help me to resolve this error?

Upvotes: 2

Views: 1156

Answers (3)

Kirill Simonov
Kirill Simonov

Reputation: 8481

Besides some errors related to invalid HTML, as mentioned by others, your background color won't change because you put <p> inside <span> which doesn't make any sence since <p> is a paragraph and <span> is a generic inline container for phrasing content. It will work though if you put <span> inside <p>: 

<p id="header2">
   <span>...</span>
</p>

But if you want to apply background to the entire cell, I recommend you to style the <td> element instead. Check the following example:

document.getElementById('headerID1').style.backgroundColor = 'blue';
document.getElementById('header2').style.backgroundColor = 'lightblue';
document.getElementById('header3').style.backgroundColor = 'lightblue';
.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; 
  }
<table class="myTable">
    <tr>
        <th>PROJECT</th>
        <th>Service</th>
        <th>PrDC</th>
        <th>DDC</th>
        <th>Last Checked Time(IST)</th>
    </tr>
    <tr>
      <td>
       <div>
        <span id="headerID1">
          <p>BG doesn't work</p>
         </span>
       </div>
      </td>
      <td>
       <div>
         <p id="header2">
          <span>BG works because &lt;span&gt; is inside &lt;p&gt;</span>
         </p>
       </div>
      </td>
      <td id="header3">
       <div>
         <p>BG for entire cell</p>
       </div>
      </td>
      <td>
       <div>
         <p>Test4</p>
       </div>
      </td>
      <td>
       <div>
         <p>Test5</p>
       </div>
      </td>
  </tr>
</table>

UPD: Probably you are getting SCRIPT5007: Unable to get property 'style' of undefined or null reference because your Json_Development_Test.js script starts executing when the rest document is not rendered yet. You can try to:

  1. Put <script src ="Json_Development_Test.js"> to the bottom of the html

  2. Put this line document.getElementById('headerID1').style.backgroundColor = 'blue'; inside the window.addEventListener('load', ...) callback:

    window.addEventListener('load', function() {
    console.log('All assets are loaded');
    document.getElementById('headerID1').style.backgroundColor = 'blue';
});

Upvotes: 3

Avishka Dambawinna
Avishka Dambawinna

Reputation: 1215

Problem is with this line of code

document.getElementById('headerID1').style.background = 'blue'

use

document.getElementById('headerID1').bgColor='blue'

instead.

Also, HTML structure is wrong too.

Upvotes: 0

jake2389
jake2389

Reputation: 1174

Your HTML is invalid. When writing HTML you might want to use an HTML validator.

A few problems with your code:

  1. the <head> should go right after the <html> tag, and you should close the <head> before opening the <body>.
  2. Delete this line <div id ="test">
  3. The property you want in your JS is backgroundColor, so you would have:
document.getElementById('headerID1').style.backgroundColor = 'blue';

Upvotes: 0

Related Questions