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

使用innerHTML而不是value。

btn.innerHTML = ...

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

Answer 2

我将不同意jp310并告诉您使用textContent，因为您不会粘贴HTML，只是文字：

btn.textContent = outMsg;

另一个调整：你setInterval中有点多余，因为它可以缩小为：

example6Timer = setInterval(example6Count, 1000);

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

Answer 3

替换

btn.value = outMsg;

与

btn.innerHTML = outMsg;

从正在间隔运行的函数更新按钮的文本是不行的

3 个答案: