Cannot read property 0 of null

Question

I get this error "Cannot read property '0' of null."

I have a table with

somename.html

<table> <tr> <td id="td1">text</td> </tr> </table>

somename.js

function test(){ var date=new Date(); if(date.getDay()==1 && date.getHours() >=13 && date.getMinutes() >=3 ){ //8-9AM document.getElementById('td1')[0].style.color = 'blue'; }else if(date.getDay()==1 && date.getHours() == 14 && date.getMinutes() <= 20){ document.getElementById('td1')[0].style.color = 'blue'; }else{ //nothing } } setInterval(test(),1000);

EDIT: new error if i remove [0] "Cannot read property 'style' of null"

@Satpal Post that as an answer, but also include everyone else's fix to the array index. — Barmar
– Barmar, Commented Feb 3, 2014 at 12:56
Any chance that you have this JS code in the <head> section instead of in the <body> section? — barak manos
– barak manos, Commented Feb 3, 2014 at 13:02

Christoph · Accepted Answer · 2018-03-23 14:12:51Z

getElementById returns null if there is no match in the document. (Which then leads to exactly your error message).

This means that either you have a typo in your selector or the html or the js gets executed before your element is included into the dom.

Also, getElementById returns a single element and not an array (Node List to be precise), so the correct call would be:

document.getElementById('td1').style.color = 'blue';

Third problem:

setInterval(test(),1000); // /\ // this will immeditately execute the function and // hands over the *return value* to setInterval

will not work as intended, it needs to be

setInterval(test,1000); // /\ // hand over the *function reference* to be executed after 1 second

so if i link my script in the <head></head> it will not execute something that is posted in <body></body>?
fixed it il add as answer in 5 min thanks :D did not know i hadde to post a link to a script at the bottom of my <body></body>
@KevinHaugen - Correct. Browsers can actually run JavaScript even if the page hasn't finished loading. I suggest you read about event handlers to learn how to make your code wait.
yes I am still juggling on learning php, java and css any websites other then w3school to help me learn?
@Kevin For your own good, you should avoid w3schools, read here why - there are also some very good alternative resources listed.

Karthick Kumar · Accepted Answer · 2014-02-03 12:54:38Z

0

if your id is unique then this will work

document.getElementById('td1').style.color = 'blue';

answered Feb 3, 2014 at 12:54

Karthick Kumar

2,3751 gold badge19 silver badges30 bronze badges

1 Comment

Barmar Over a year ago

This will probably just change the error to Cannot read property 'style' of null

Barmar · Accepted Answer · 2014-02-03 13:02:46Z

When you call setInterval, you must supply a function. You're calling the function immediately, not passing the function to setInterval. It should be:

setInterval(test, 1000);

Since you're calling it immediately, it's running before the DOM has loaded fully, and the td1 element isn't found. So getElementById returns null instead of the element.

In addition, as the other answers pointed out, you should not use [0] to access the element returned by getElementById. It returns a single element, not a NodeList.

Samuel Liew · Accepted Answer · 2014-02-03 13:07:14Z

document.getElementById('td1') returns you the element, and not an array. Remove the [0].

You could also perform a check on whether the element exists before trying to use it:

function test() { var elem = document.getElementById('td1'); if(typeof elem == 'undefined') return; var date = new Date(); if(date.getDay()==1 && date.getHours() >=13 && date.getMinutes() >=3 ) { //8-9AM elem.style.color = 'blue'; } else if(date.getDay()==1 && date.getHours() == 14 && date.getMinutes() <= 20) { elem.style.color = 'blue'; } else { //nothing } } setInterval(test, 1000);

Collectives™ on Stack Overflow

Cannot read property 0 of null

4 Answers 4

5 Comments

1 Comment

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

Comments

2 Comments

Linked

Related