从间隔运行的函数更新按钮的文本不起作用

Question

我正在自学 JavaScript，并且正在浏览一些不同的示例。我想做的一件事是让按钮在单击时从 10 倒计时到 0，这样我就可以演示 setInterval 和 clearInterval 方法的使用。

从日志记录到控制台，一切看起来都在按我的预期运行，但按钮上的文本没有更新。

这是按钮的定义方式...

<!-- Example 6 -->
  <tr>  
   <td><h2>Example 6: Timing</h2></td>
  <tr>
   <td>Click the button to start the countdown</td>
  </tr>
  <tr>
   <td><button id="example6Button" onclick="example6Click()">Start Countdown</button></td>
  </tr>

单击按钮时，应该将按钮文本更改为 10，并且每隔一秒将文本更改为 9、8、7 等，直到变为 0。

这是涉及的两个函数。按钮点击触发 example6Click() 并且该函数使用 setInterval 每秒触发 example6Count()。

  var example6Counter = 10;
  var example6Timer;

  function example6Click()
  {
    console.log("example6Click() called");
    example6Timer = setInterval(function(){example6Count()}, 1000);       
  }

  function example6Count()
  {
    console.log("example6Count called");
    console.log("example6Counter = " + example6Counter);

    var btn = document.getElementById("example6Button");
    console.log("btn = " + btn.id);

    var outMsg = "Count = " + example6Counter;
    console.log("outMsg = " + outMsg);

    btn.value = outMsg;
    console.log("btn.value = " + btn.value);

    example6Counter--;

    if(example6Counter <= 0)
    {
      console.log("calling clearInterval");
      clearInterval(example6Timer);
    }
  }

这是我在 Chrome 中测试时得到的控制台输出。它显示example6Click() 函数被调用，然后example6Count() 函数像我预期的那样每秒调用一次。它显示当我调用getElementById 时正在找到该按钮，并在我设置btn.value = outMsg 后显示btn.value 设置正确。

example6Click() called jsdemo.html:128
example6Count called jsdemo.html:134
example6Counter = 10 jsdemo.html:135
btn = example6Button jsdemo.html:138
outMsg = Count = 10 jsdemo.html:141
btn.value = Count = 10 jsdemo.html:144
example6Count called jsdemo.html:134
example6Counter = 9 jsdemo.html:135
btn = example6Button jsdemo.html:138
outMsg = Count = 9 jsdemo.html:141
btn.value = Count = 9 jsdemo.html:144
example6Count called jsdemo.html:134
example6Counter = 8 jsdemo.html:135
btn = example6Button jsdemo.html:138
outMsg = Count = 8 jsdemo.html:141
btn.value = Count = 8 jsdemo.html:144
example6Count called jsdemo.html:134
example6Counter = 7 jsdemo.html:135
btn = example6Button jsdemo.html:138
outMsg = Count = 7 jsdemo.html:141
btn.value = Count = 7 jsdemo.html:144
example6Count called jsdemo.html:134
example6Counter = 6 jsdemo.html:135
btn = example6Button jsdemo.html:138
outMsg = Count = 6 jsdemo.html:141
btn.value = Count = 6 jsdemo.html:144
example6Count called jsdemo.html:134
example6Counter = 5 jsdemo.html:135
btn = example6Button jsdemo.html:138
outMsg = Count = 5 jsdemo.html:141
btn.value = Count = 5 jsdemo.html:144
example6Count called jsdemo.html:134
example6Counter = 4 jsdemo.html:135
btn = example6Button jsdemo.html:138
outMsg = Count = 4 jsdemo.html:141
btn.value = Count = 4 jsdemo.html:144
example6Count called jsdemo.html:134
example6Counter = 3 jsdemo.html:135
btn = example6Button jsdemo.html:138
outMsg = Count = 3 jsdemo.html:141
btn.value = Count = 3 jsdemo.html:144
example6Count called jsdemo.html:134
example6Counter = 2 jsdemo.html:135
btn = example6Button jsdemo.html:138
outMsg = Count = 2 jsdemo.html:141
btn.value = Count = 2 jsdemo.html:144
example6Count called jsdemo.html:134
example6Counter = 1 jsdemo.html:135
btn = example6Button jsdemo.html:138
outMsg = Count = 1 jsdemo.html:141
btn.value = Count = 1 jsdemo.html:144
calling clearInterval 

但是，按钮上的文本仍然没有改变。为什么？我也试过btn.innerHTML = outMsg，但这没有任何好处。我还尝试使用单独的标签或跨度来设置倒计时文本，但它们也不起作用。

example6Count() 函数是否在无法更新 UI 的单独线程中调用？

Answer 1

我不同意 jp310 并告诉你使用textContent，因为你没有粘贴 HTML，只是文本：

btn.textContent = outMsg;

另一个调整：您的setInterval 有点多余，因为它可以精简为：

example6Timer = setInterval(example6Count, 1000); 

有关工作示例，请参阅 this JSFiddle。

Answer 2

使用 innerHTML 代替 value。

btn.innerHTML = ...

因为您使用的是<button> 而不是<input type="button">，所以您需要设置innerHTML。 <button>s 不会根据 value 属性获取他们的文本。

Answer 3

替换

btn.value = outMsg; 

与

btn.innerHTML = outMsg;