Невозможно прочитать свойство * 0 * of null

Question

Я получаю эту ошибку «Не могу прочитать свойство« 0 »из null.»

У меня есть таблица с

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: новая ошибка, если я удалить [0] «Не удается прочитать свойство 'стиль' от нуля "

Answer 1

getElementById возвращается null, если есть в документе нет соответствия. (Что приводит к точному сообщению об ошибке).

Это означает, что либо у вас есть опечатка либо в вашем селекторе, либо в html, либо в js get выполняется до того, как ваш элемент будет включен в dom.

Во-вторых, getElementById возвращает один элемент, а не массив (Node List быть точным), поэтому правильный вызов будет:

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

Третья проблема:

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

не будет работать Предполагается, что оно должно быть

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

Answer 2

document.getElementById('td1') возвращает вам элемент, а не массив. Удалите [0].

Можно также выполнить проверку того, существует ли элемент, прежде чем пытаться использовать его:

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

Answer 3

если ваш id уникален, то это будет работать

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

Answer 4

Когда вы звоните в setInterval, вы должны предоставить функцию. Вы вызываете функцию немедленно, не передавая функцию setInterval. Оно должно быть:

setInterval(test, 1000); 

Поскольку вы вызываете его сразу, он работает до того, как DOM полностью загружена, а td1 элемент не найден. Итак, getElementById возвращает null вместо элемента.

Кроме того, как указывалось в других ответах, вы не должны использовать [0] для доступа к элементу, возвращаемому getElementById. Он возвращает один элемент, а не NodeList.