此javascript代码如何不与getelementsbyclass一起工作？

ktca8awb 于 2021-09-29 发布在 Java

关注(0)|答案(5)|浏览(241)

此问题已在此处找到答案：

queryselectorall和getelementsby*方法返回什么(（10个答案）
11小时前关门了。
我试图按类名查找元素，并在用户按下按钮后打印一些元素。我要打印的文本位于我调用的方法的数组中。
为什么下面的代码不打印该元素中的文本？

<html>
        <script>
            function perform(){
                let fruits= ['apple','mango','kiwi','jackfruit'];
                document.getElementsByClassName('king').innerHTML= fruits[1];
            }
        </script>

    <body>
        <p class='king'>inflate me</p>
        <button onclick='perform()'>click to see</button>

    </body>
</html>

来源：https://stackoverflow.com/questions/68538376/how-does-this-javascript-code-not-working-with-getelementsbyclass

5条答案

按热度按时间

8zzbczxx1#

许多html元素可以具有相同的类。所以

document.getElementByClassName('something') // would return an array.

有两种方法可以解决这个问题
抓取列表中的第一项
doDocument.getelementbyclassname（“某物”）[0]。innerhtml='您想要的任何内容'
我建议给元素一个id，然后
document.getelementbyid（'something'）.innerhtml='which your want'在本例中，它将只返回单个元素

赞(0）回复(0）举报 2021-09-29

f1tvaqid2#

问题出在选择器上。

function perform(){
  let fruits= ['apple','mango','kiwi','jackfruit'];
  document.querySelectorAll('.king')[0].innerHTML= fruits[1];
}

<p class='king'>inflate me</p>
<button onclick='perform()'>click to see</button>

赞(0）回复(0）举报 2021-09-29

brvekthn3#

你可以用这个：

<html>
        <script>
            let fruits= ["apple","mango","kiwi","jackfruit"];
            function perform() {
                document.getElementById("king").innerHTML = fruits[1];
            }
        </script>
    <body>
        <p id="king">inflate me</p>
        <button onclick="perform()">click to see</button>   
        </p>
    </body>
</html>

javascript与getelementbyclassname混淆，因此如果只显示一个元素，则应使用getelementbyid。

赞(0）回复(0）举报 2021-09-29

smtd7mpg4#

这种方式：

<html>
<body>
  <p class='king'>inflate me</p>
  <button onclick='perform()'>click to see</button>

<script>
const
  kingElement = document.querySelector('.king')    // same as CSS notation
, fruits      = [ 'apple', 'mango', 'kiwi', 'jackfruit' ]
  ;
var fruit_Index = 0
  ;
function perform()
  {
  kingElement.textContent = fruits[fruit_Index]
  fruit_Index = ++fruit_Index % fruits.length  // something different
  }
</script>
</body>
</html>

赞(0）回复(0）举报 2021-09-29

41zrol4v5#

document.getElementsByClassName('king') 返回一个数组中的多个元素（即使html中只有一个元素），因此javascript不知道要将内容添加到哪些元素中。
在您的情况下，请使用：

document.getElementsByClassName('king')[0].innerHTML = fruits[1]

为了得到结果。
不需要的提示：如果您确定只使用一个元素，请使用 document.getElementById 相反

赞(0）回复(0）举报 2021-09-29

我来回答

此javascript代码如何不与getelementsbyclass一起工作？

5条答案

相关问题

热门标签

最新问答