猿问

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

我对JavaScript相当陌生，我正在练习较小的项目。


我想做的是将一堆标签的内部HTML更改为它们的顺序。


让我解释一下。


我想从这里开始。


*Number <br>

*Number <br>

*Number

对此。


*1 <br>

*2 <br>

*3

纯粹从脚本中做到这一点。


这就是我现在所拥有的。


断续器


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


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


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


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

脚本


function orderElements() {

  var reference = document.getElementById('thisIsANumber');

  for (var i = 0; i < 3; i++) {

    reference[i].innerHTML = i;

  }

}


尚方宝剑之说
浏览 97回答 2
2回答

MMMHUHU

正如评论中提到的，你不能让多个东西使用相同的东西 - 你应该使用一个。idclass例如，这表示您有一个段落，而这种段落是“编号段落”：<p class="numbered-paragraph">现在，您可以选择具有该类的所有段落，循环访问它们并为每个段落指定一个数字。此示例代码是显式的，因此很清楚 - 有很多方法可以缩短：document.getElementById('numberGenerator')&nbsp; &nbsp; &nbsp; &nbsp; .addEventListener('click', function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const paragraphs = document.querySelectorAll('.numbered-paragraph');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let i = 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (p of paragraphs) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; p.innerText = 'paragraph number ' + (i++);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });<p class="numbered-paragraph">Number</p><p class="numbered-paragraph">Number</p><p class="numbered-paragraph">Number</p><button id="numberGenerator">Order Elements</button>注意 我还使用过带有匿名函数的&nbsp;addEventListener，而不是具有命名函数的内联&nbsp;onclick=。
0

哔哔one

这里的主要问题是您使用了 而不是 。这样做的问题是，an 用于标识一个元素，而 a 可用于标识多个元素。如果你想要的是编号的段落元素，而不是一个有序的列表，这应该可以解决问题：idclassidclassfunction orderElements() {&nbsp; var reference = document.getElementsByClassName("thisIsANumber");&nbsp; for (var i = 0; i < 3; i++) {&nbsp; &nbsp; reference[i].innerHTML = i;&nbsp; }}<body>&nbsp; <p class="thisIsANumber">Number</p>&nbsp; <p class="thisIsANumber">Number</p>&nbsp; <p class="thisIsANumber">Number</p>&nbsp; <button onclick="orderElements()">Order Elements</button>&nbsp;</body>&nbsp;
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答