JS TypeError：無法讀取null的屬性“樣式”-Chrome

Question

問題是，每次我想在Chrome中運行它時，都會彈出錯誤消息。 每次更改的天/小時/分鍾應變為紅色。

// Set the date we're counting down to
var countDownDate = new Date("Nov 30, 2018 15:50:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Blink
    if (seconds == 59){
        document.getElementById("minutes").style.color = 'red';

        if(minutes == 59){
            document.getElementById("hours").style.color = 'red';

            if(hour == 24){
            document.getElementById("days").style.color = 'red';
            }
        }   
    }
    else{
        document.getElementById("minutes").style.color = 'black';
        document.getElementById("hours").style.color = 'black';
        document.getElementById("days").style.color = 'black';
    }

    // Delete Day, Hour and Minute Timer if they are 0
    if (days !== 0 && hours !== 0 && minutes !== 0 && seconds !== 0){
        document.getElementById("time").innerHTML = "Noch " + days + " Tage " + hours + " Stunden "
        + minutes + " Minuten und " + seconds + " Sekunden bis zur Fertigstellung des Spiels";

        if (days === 0){
        document.getElementById("time").innerHTML = "Noch " + hours + " Stunden "
        + minutes + " Minuten und " + seconds + " Sekunden bis zur Fertigstellung des Spiels";

            if (hours === 0){
            document.getElementById("time").innerHTML = "Noch " + minutes + " Minuten und " + seconds + " Sekunden bis zur Fertigstellung des Spiels";

                if (minutes === 0){
                document.getElementById("time").innerHTML = "Noch " + seconds + " Sekunden bis zur Fertigstellung des Spiels";
                }   
            }
        }
    }

    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("time").innerHTML = "Zu Ende";
    }

    // show hidden content if days / 3 = mod 0      
    if (days % 3 !== 0){
        document.getElementById("special").style.visibility = 'hidden';
    }

}, 1000);

Answer 1

我可以在這里看到兩個問題。

第一個是您嘗試將getElementById與似乎還不存在的元素（“分鍾”，“小時”，“天”）一起使用。 具有這些ID的元素必須存在於DOM中，然后才能使用getElementById方法進行訪問。

解決此問題的一種方法是將當前變量包裝在<span>標記中，並為每個變量賦予一個唯一的ID，以便以后使用。

var daysElement = `<span id="days">${days}</span>`,
    hoursElement = `<span id="hours">${hours}</span>`,
    minutesElement = `<span id="minutes">${minutes}</span>`,
    secondsElement = `<span id="seconds">${days}</span>`;

現在，如果將這些元素添加到“時間”元素的innerHTML中（而不僅僅是數字本身），則可以定位其id，然后更改其樣式。

document.getElementById("time").innerHTML = "Noch " 
+ hoursElement + " Stunden " + minutesElement + " Minuten und " 
+ secondsElement + " Sekunden bis zur Fertigstellung des Spiels";

最后，您需要確保操作順序正確。 將以下代碼移動到更改“時間”的innerHTML的部分下方 ，以便在嘗試更改其樣式屬性之前，元素已存在於DOM中。

if (seconds == 59){
    document.getElementById("minutes").style.color = 'red';

    if(minutes == 59){
        document.getElementById("hours").style.color = 'red';

        if(hour == 24){
        document.getElementById("days").style.color = 'red';
        }
    }   
}
else{
    document.getElementById("minutes").style.color = 'black';
    document.getElementById("hours").style.color = 'black';
    document.getElementById("days").style.color = 'black';
}

Answer 2

似乎不是JS的問題。 無法讀取null的屬性樣式，表示您嘗試訪問的對象的樣式屬性為null。 請檢查您正在使用的所有document.getElementById api，這些元素在html元素中（在代碼中使用的）具有正確的ID。

另外，請在瀏覽器控制台中簽入，使用document.getElementById api訪問元素。

如果是加載問題，請在body標簽的末尾添加腳本，以便加載元素。

然后，如果未解決，則將調試器添加到js行中，並檢查為什么該元素不可用。