如何根据它们在 JavaScript 中的顺序更改标签 innerHTML？答案

【问题标题】：How do I change a tag's inner HTML based on their order in JavaScript?如何根据它们在 JavaScript 中的顺序更改标签 innerHTML？
【发布时间】：2020-09-28 01:48:02
【问题描述】：

我对 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;
  }
}

【问题讨论】：

错误代码 => id 必须是唯一的
您的第一个示例显示<br />（换行符）元素，但您的第二个示例使用<p>（段落）元素。它们是不同的东西。请注意，<br /> 是一个没有内容的自闭合元素，而 <p> 有。
另外，当设置人类可读的文本内容时，你应该使用.textContent而不是.innerHTML。
进一步解释 Jojo 先生的评论 — 您的 document.getElementById('thisIsANumber') 只会获得一个元素，因为 id 在一个页。如果您打算拥有多个相同类型的项目，那么您想要使用的是 class class="thisIsANumber"
对不起，戴，我从来没有想过要显示
标签。我使用它们将点显示为列表，因为默认情况下它们显示在同一行。

标签： javascript html for-loop innerhtml

【解决方案1】：

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

例如，这表示你有一个段落，而这个种类的段落是一个“编号段落”：

<p class="numbered-paragraph">

现在您可以选择所有具有该类的段落，遍历它们并给每个段落一个数字。

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

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=。

【讨论】：

【解决方案2】：

这里的主要问题是您使用了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>

【讨论】：

感谢简单的解释和解决方案！