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

Question

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?

Kirill Simonov · Accepted Answer · 2019-10-05 07:21:55Z

3

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:

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

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';
});

edited Oct 5, 2019 at 7:21

answered Oct 5, 2019 at 4:32

Kirill Simonov

8,4913 gold badges23 silver badges47 bronze badges

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

3 Comments

hanju Over a year ago

Hi @Kirill Simonov, after modified with your code, iam still getting following error 'SCRIPT5007: Unable to get property 'style' of undefined or null reference Json_Development_Test.js (3,1)' Please let me know what went wrong from my side

hanju Over a year ago

HI @Kirill, i have one more thing which i missed to ask, the background color of the cell not get updated with the blue color, it only applied to the text. so would like to know how to apply the background color entirely to the cell?

Kirill Simonov Over a year ago

@hanju take a closer look at my answer: But if you want to apply background to the entire cell, I recommend you to style the <td> element instead. Click Run code snippet and you will see that <td id="header3"> has a backgound applied to the entire cell.

Avishka Dambawinna · Accepted Answer · 2019-10-05 03:52:47Z

0

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.

edited Oct 5, 2019 at 3:52

answered Oct 5, 2019 at 3:34

Avishka Dambawinna

1,2151 gold badge15 silver badges31 bronze badges

Comments

jake2389 · Accepted Answer · 2019-10-05 03:22:45Z

0

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

A few problems with your code:

the <head> should go right after the <html> tag, and you should close the <head> before opening the <body>.
Delete this line <div id ="test">
The property you want in your JS is backgroundColor, so you would have:

document.getElementById('headerID1').style.backgroundColor = 'blue';

answered Oct 5, 2019 at 3:22

jake2389

1,1748 silver badges22 bronze badges

1 Comment

hanju Over a year ago

HI jaske2389 and Avishka Kavindu B. Dambawinna i have modified the script accordingly, but still the color is not getting changed and getting following #error 'SCRIPT5007: Unable to set property 'bgColor' of undefined or null reference Json_Development_Test.js (4,1)' Let me know please what went wrong

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related