有没有人知道这个js代码43行为什么报错

img

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        .b2 {
            color: coral;
        }
        .info{
            color: aqua;
        }
    </style>
</head>

<body>
    <button id="b1"> 点击 </button>
    <button class="b2"> 还原 </button>
    <div class="info"> 这是一段文字</div>
</body>
<script>
    //获取所有id为“b1”的元素，并将它们存储在名为“elements”的变量中
    let btn1 = document.getElementById("b1");
    btn1.addEventListener("click", change);
    function change() {
        //遍历所有class为“info”的元素,修改其中的文本和字体颜色，并在其中加入一个a标签链接
        let elements = document.getElementsByClassName("info");
        for (let element of elements) {
            element.innerText = "这是一段新的文字";
            element.style.color = "red";

            let newA = document.createElement("a");
            newA.href = "https://www.baidu.com";
            newA.innerText = "百度";
            newA.style.marginLeft = "100px";
            newA.target = "_blank";
            element.appendChild(newA);
        }
    }

    //还原
    let btn2 = document.getElementsByClassName("b2");
    btn2.addEventListener("click",reset);
    function reset() {
        let infoDiv = document.getElementsByClassName("info");
        infoDiv.innerText = "这是一段文字";
        infoDiv.style.color = "aqua";
    }

</script>

</html>

43 行提示 btn2.addEventListener 不是个方法，这就有点离谱了。

getElementsByClassName 返回一个元素列表啊（elements 嘛），所以要用 [0] 获取 btn2

getElementByClassName 获取到的是数组哦
你需要 btn2[0].addxxx

【以下回答由 GPT 生成】

这个JavaScript代码中的第43行报错是因为document.getElementsByClassName("info")返回的是一个类数组对象(NodeList)，而不是一个单个元素。所以不能直接对它使用innerText，需要通过循环遍历每个元素来进行修改。

下面是修复这个问题的代码：

function change() {
    let elements = document.getElementsByClassName("info");
    for (let i = 0; i < elements.length; i++) {
        let element = elements[i];
        element.innerText = "这是一段新的文字";
        element.style.color = "red";

        let newA = document.createElement("a");
        newA.href = "https://www.baidu.com";
        newA.innerText = "点击此链接";
        element.appendChild(newA);
    }
}

将循环改为传统的for循环，通过索引访问每个元素进行修改。这样就可以顺利地修改所有class为"info"的元素。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^