javascript - getElementById() vs querySelectorAll() 有问题

问题描述

为什么当我使用.getElementById()（我将其用作测试）时有效，但 querySelectorAll() 无效并抛出“addEventListener 不是函数？” 是因为我选择了多个按钮还是存在多个 addEventListeners 语法？

const btn = document.querySelectorAll("marker");

btn.addEventListener("click", () => {
    console.log("works");
});
btn.addEventListener("click", () => {
    if (btn.style.backgroundColor === "green") {
        btn.style.backgroundColor = "red";
        btn.innerHTML = "-";
    } else {
        btn.style.backgroundColor = "green";
        btn.innerHTML = "+";
    }
});

<!DOCTYPE html>
<html>
    <head>
        <title>Marking</title>
    </head>
    <body>
        <script src="script.js" defer></script>
        <div id="main">
            <button id="marker" style="background-color: green">+</button>
            <button id="marker" style="background-color: green">+</button>
            <button id="marker" style="background-color: green">+</button>
            <button id="marker" style="background-color: green">+</button>
            <button id="marker" style="background-color: green">+</button>
            <button id="marker" style="background-color: green">+</button>
        </div>
    </body>
</html>

标签： javascript

javascript - getElementById() vs querySelectorAll() 有问题

问题描述

解决方案

推荐阅读