为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

尚方宝剑之说 2022-09-23 16:40:37

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

  }

}


查看完整描述

2 回答

?
MMMHUHU

TA贡献1512条经验 获得超8个赞

正如评论中提到的,你不能让多个东西使用相同的东西 - 你应该使用一个。idclass


例如,这表示您有一个段落,而这种段落是“编号段落”:


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


查看完整回答
反对 回复 2022-09-23
?
哔哔one

TA贡献1536条经验 获得超7个赞

这里的主要问题是您使用了 而不是 。这样做的问题是,an 用于标识一个元素,而 a 可用于标识多个元素。如果你想要的是编号的段落元素,而不是一个有序的列表,这应该可以解决问题:idclassidclass


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> 


查看完整回答
反对 回复 2022-09-23
  • 2 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信