javascript 为什么querySelectAll返回空的NodeList，尽管应该有三个按钮？

ca1c2owp 于 2023-05-05 发布在 Java

关注(0)|答案(2)|浏览(141)

我试图在程序中的所有按钮中添加事件侦听器，但是constbuttons = document.querySelectorAll（'. button'）;返回空的NodeList。
HTML：

<div id="buttons" class="buttons">
        <button type="button" class="button" id="send">Send</button>
        <button type="button" class="button" id="delete">Delete</button>
        <button type="button" class="button" id="again">Again</button>
    </div>

JS：

const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
    button.addEventListener("click", function() {
        clickEvent(param);
    });
});

这就是我所拥有的，我不知道为什么它不起作用。它应该返回按钮的NodeList，但该列表为空。

JavaScript

来源：https://stackoverflow.com/questions/76172273/why-does-queryselectall-return-empty-nodelist-even-though-there-should-be-three

2条答案

按热度按时间

ltskdhd11#

在<div id="buttons">插入文档之前，您正在运行<script>
使用<script defer src="...">或在<body>的末尾放置脚本以避免这种情况

<script> console.log(document.quserySelectorAll('a')) // [] </script>
<a> This is A </a>
<script> console.log(document.quserySelectorAll('a')) // [<a>] </script>

赞(0）回复(0）举报 2023-05-05

8gsdolmq2#

您正在使用#button作为document.querySelectorAll（）中的选择器，但您的按钮的ID为send、delete和again。#选择器用于选择具有特定id属性的元素，而不是具有特定类或标记名的元素，因此请改用class按钮（。是类）

const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
  button.addEventListener("click", function() {
    clickEvent(param);
  });
});

赞(0）回复(0）举报 2023-05-05

我来回答

javascript 为什么querySelectAll返回空的NodeList，尽管应该有三个按钮？

2条答案

相关问题

热门标签

最新问答