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"
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"
Share Improve this question edited Feb 3, 2014 at 12:55 KevinHaugen asked Feb 3, 2014 at 12:51 KevinHaugenKevinHaugen 791 gold badge1 silver badge9 bronze badges 5 |4 Answers
Reset to default 9getElementById 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
if your id is unique then this will work
document.getElementById('td1').style.color = 'blue';
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.
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);
java.jsmakes me cringe just likephp.py:) – Lix Commented Feb 3, 2014 at 12:53document.getElementById('td1')[0]I guess – techBeginner Commented Feb 3, 2014 at 12:53setInterval(test,1000);– Satpal Commented Feb 3, 2014 at 12:55<head>section instead of in the<body>section? – barak manos Commented Feb 3, 2014 at 13:02