时间戳

首页 > 解决方案 > 我正在尝试使用 JavaScript 更改 HTML

javascript - 我正在尝试使用 JavaScript 更改 HTML

问题描述

我正在尝试使用 JavaScript 来更改网页的 HTML 内容。我有一组数字，从 0 到 9，我正在尝试使用 JavaScript 将其从 9 更改为 0。

HTML 和 JS 是

function flip(amount) {
  var x = 0;
  for (i = amount; x < amount; x++) {
    setTimeout(() => {
      document.getElementById(String(x)).innerText = String(amount - x - 1);
    }, 2000);
    console.log(x);
  }
}
<span id="0">0</span>
<span id="1">1</span>
<span id="2">2</span>
<span id="3">3</span>
<span id="4">4</span>
<span id="5">5</span>
<span id="6">6</span>
<span id="7">7</span>
<span id="8">8</span>
<span id="9">9</span>
<button id="b1" onclick="flip(10);">Change</button>

在控制台中，x 被正确记录了十次。在控制台中，它说

Uncaught TypeError: Cannot set property 'innerText' of null at change.html:25

（change.html 是文档的名称）

我不知道那应该是什么意思或如何解决它。

标签： javascripthtml

解决方案

function flip(amount) {
  for (var i = 0; i <= amount; i++) {
    setTimeout(() => {
      document.getElementById(String(x)).innerText = String(amount - i - 1);
    }, 2000);
    console.log(x);
  }
}
<span id="0">0</span>
<span id="1">1</span>
<span id="2">2</span>
<span id="3">3</span>
<span id="4">4</span>
<span id="5">5</span>
<span id="6">6</span>
<span id="7">7</span>
<span id="8">8</span>
<span id="9">9</span>
<button id="b1" onclick="flip(10);">Change</button>

推荐阅读