未捕获的类型错误：无法设置空倒数计时器的属性"innerHTML"

Question

我是JavaScript Newbie，我正在尝试构建一个简单的倒计时计时器，该计时器仅在几秒钟内下降。它显示了X的未接收类型错误。我认为这意味着该功能不是递归的。代码如下：

function timer(x, elem){
    var elem = document.getElementById(elem);
    elem.innerHTML = x;
    if (x > 0) {
        setTimeout(timer(x-1, elem),1000);
    }
}

Answer 1

您有两个问题：

1. 您正在覆盖elem的值为DOM元素，然后尝试重复使用它，就好像它仍然是字符串

2. setTimeout期望它可以每1000毫秒调用一次功能。相反，您调用功能并将结果传递给setTimeout。区别有点令人困惑，但可能会有助于看到它分为另一个变量：

这就是您当前正在做的

var myFuncResult = timer(x-1, elem);   // this returns the result of the function
setTimeOut(myFuncResult, 1000);

您想要

var myFunc = function() { timer(x-1, elem) }; // this returns a function that can be called
setTimeOut(myFunc, 1000);

当然，您可以像尝试这样做一样将功能直接放入setTimeout中。

以下执行您想要的操作（命中"运行"）：

function timer(x, elem){
    var DOMelem = document.getElementById(elem);
    DOMelem.innerHTML = x;
    if (x > 0) {
        setTimeout(function() {
          timer(x-1, elem)
        },1000);
    }
}
timer(10, "my-timer");

<div id="my-timer"></div>