Javascript JS TypeError:无法读取属性'；风格'；空铬

问题是，每次我想在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);

//设置我们倒计时的日期
var countDownDate=新日期（“2018年11月30日15:50:25”）.getTime（）；
//每1秒更新一次倒计时
var x=setInterval（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
//眨眼
如果（秒==59）{
document.getElementById（“分钟”）.style.color='red'；
如果（分钟==59）{
document.getElementById（“hours”）.style.color='red'；
如果（小时==24）{
document.getElementById（“天”）.style.color='red'；
}
}   
}
否则{
document.getElementById（“分钟”）.style.color='black'；
document.getElementById（“hours”）.style.color='black'；
document.getElementById（“天”）.style.color='black'；
}
//如果日期、小时和分钟计时器为0，则删除它们
如果（天！==0和小时！==0和分钟！==0和秒！==0）{
document.getElementById（“time”）.innerHTML=“Noch”+天+“Tage”+小时+“Stunden”
+分钟+“分钟+秒”+“时间”；
如果（天数==0）{
document.getElementById（“time”）.innerHTML=“Noch”+hours+“Stunden”
+分钟+“分钟+秒”+“时间”；
如果（小时==0）{
document.getElementById（“time”）.innerHTML=“Noch”+分钟数+“分钟数+秒数+”这是一个很好的例子；
如果（分钟===0）{
document.getElementById（“time”）.innerHTML=“Noch”+seconds+“Sekunden bis zur Fertigstellung des Spiels”；
}   
}
}
}
//如果倒计时结束，写一些文字
如果（距离<0）{
净间隔（x）；
document.getElementById（“time”）.innerHTML=“Zu Ende”；
}
//如果天数/3=0，则显示隐藏内容
如果（天数%3！==0）{
document.getElementById（“特殊”）.style.visibility='hidden'；
}
}, 1000);

问题似乎不在于JS。 无法读取null的属性style表示您尝试访问的对象的style属性为null。 请检查您正在使用的所有document.getElementById api，以确保元素在html元素（您正在代码中使用）中具有正确的id

还可以在浏览器控制台中使用document.getElementById api访问元素

如果存在加载问题，请在body标记的末尾添加脚本，以便加载元素

---

然后，如果未解析，则将调试器添加到js行，并检查该元素不可用的原因

我可以在这里看到两个问题

首先，您试图使用

getElementById

处理看起来还不存在的元素（“分钟”、“小时”、“天”）。具有这些ID的元素需要存在于DOM中，然后才能使用

getElementById

方法访问它们

解决此问题的一种方法是将当前变量包装在

标记中，并为每个变量提供一个唯一的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>`;

最后，您需要确保您的操作顺序是正确的。将以下代码移到更改“time”的

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

---

DOM中没有id为

minutes

、

hours

、

days

和/或

special

的元素（当函数执行时）。“无法读取null的属性样式表示您尝试访问的对象的样式属性为null。”-否错误消息绝对清楚。

.style

的左边是

null

，你是说.style的左边吗@安德烈亚斯

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