该JavaScript代码如何不能与GetElementsByClass一起工作？

顺晟科技

2021-07-27 11:06:10

我试图通过classname找到一个元素，并在用户按下按钮后打印一些元素。我要打印的文本位于我所调用的方法的数组中。

为什么下面的代码不打印该元素中的文本？

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

顺晟科技：

问题出在选择器上。

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>

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

在您的情况下，请使用:

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

获取结果。

不需要的提示：如果您确定只使用一个元素，请使用document.getElementById.

上一篇：Django项目中WeazyPrin 下一篇：如何构建项直接位于彼此下方的网格？

网站建设

Html

该JavaScript代码如何不能与GetElementsByClass一起工作？