Question

我正在尝试设置一个使用setInterval（）的计时器，其中每1000毫秒一个变量递增1.为了测试并查看它是否有效，我试图设置一个带有id的简单段落，并且将innerHTML更改为变量计时器，它应该计数到1,2,3等。但是每当代码运行时，段落都显示NaN，我不知道为什么。有人可以帮忙吗？

以下是代码：

<!DOCTYPE html>
<html>
<body onload=autoTrafficLight()>

<p id="msg">0</p>

<table border="10px" style="background-color: rgb(0, 0, 0);">
<tr>
<td width="30px" height="30px" style="background-color: rgb(0, 0, 0);" id="1"></td>
</tr>
<tr>
<td width="30px" height="30px" style="background-color: rgb(0, 0, 0);" id="2"></td>
</tr>
<tr>
<td width="30px" height="30px" style="background-color: rgb(0, 0, 0);" id="3"></td>
</tr>
</table>

<script>
var timer = 0
function autoTrafficLight() {
    setInterval(function() { 
        var timer = timer + 1;      
        document.getElementById("msg").innerHTML = +timer
    }, 1000)

}
</script>
</body>
</html>

Answer 1

您正在重新声明计时器变量，所以基本上您尝试将undefined和1一起添加。 timer = timer + 1;将修复或计时器++;

var timer = 0
function autoTrafficLight() {
    setInterval(function() { 
        timer = timer + 1;      
        document.getElementById("msg").innerHTML = timer
    }, 1000)

}

Answer 2

JS小提琴链接：JS Fiddle

将计时器定义为全局变量。

var timer = 0
function autoTrafficLight() {
    setInterval(function() { 
        timer = timer + 1;  
        console.log(timer);
        document.getElementById("msg").innerHTML = timer;
    }, 1000)

}

将段落的innerHTML更改为返回NaN的变量

2 个答案: