如何根据标签在 JavaScript 中的顺序更改标签的内部 HTML？

Question

我是 JavaScript 的新手，正在练习较小的项目。

我想做的是把一堆标签里面的HTML改成它们排列的序号

让我解释一下。

我想从这里开始。

*Number <br>
*Number <br>
*Number

至此。

*1 <br>
*2 <br>
*3

纯粹从JavaScript开始做。

这就是我现在拥有的。

HTML

<p id="thisIsANumber">Number</p>

<p id="thisIsANumber">Number</p>

<p id="thisIsANumber">Number</p>

<button onclick="orderElements()">Order Elements</button>

JavaScript

function orderElements() {
  var reference = document.getElementById('thisIsANumber');
  for (var i = 0; i < 3; i++) {
    reference[i].innerHTML = i;
  }
}

Answer 1

这里的主要问题是您使用了 id 而不是 class。问题在于 id 用于标识一个元素，而 class 可用于标识多个元素。如果您想要的是带编号的段落元素，而不是有序列表，这应该可以解决问题：

function orderElements() {
  var reference = document.getElementsByClassName("thisIsANumber");
  for (var i = 0; i < 3; i++) {
    reference[i].innerHTML = i;
  }
}

<body>
  <p class="thisIsANumber">Number</p>

  <p class="thisIsANumber">Number</p>

  <p class="thisIsANumber">Number</p>

  <button onclick="orderElements()">Order Elements</button>
 </body>

Answer 2

如评论中所述，您不能让多个事物使用相同的 id — 您应该改用 class。

例如，这表示您有一个段落，这个种类的段落是"numbered-paragraph":

<p class="numbered-paragraph">

现在您可以 select 所有具有 class 的段落，遍历它们并给每个段落一个编号。

这个示例代码是明确的，所以很清楚 — 有很多方法可以缩短它：

document.getElementById('numberGenerator')
        .addEventListener('click', function(e) {
            const paragraphs = document.querySelectorAll('.numbered-paragraph');
            let i = 1;
            for (p of paragraphs) {
                p.innerText = 'paragraph number ' + (i++);
            }
        });

<p class="numbered-paragraph">Number</p>

<p class="numbered-paragraph">Number</p>

<p class="numbered-paragraph">Number</p>

<button id="numberGenerator">Order Elements</button>

请注意，我还使用了带有匿名函数的 addEventListener，而不是带有命名函数的内联 onclick=。

如何根据标签在 JavaScript 中的顺序更改标签的内部 HTML？

How do I change a tag's inner HTML based on their order in JavaScript?

html

javascript

for-loop

innerhtml