ClickEvent (或查询选择器)无法正常工作

Question

我正在尝试建立小型计算器使用HTML/CSS和JS。

问题是，当我试图从HTML script中选择计算器的按钮并将EventListener添加到它们中时，它们不能正常工作。以下是我的HTML的一部分：

`<table class="table1">
            <tr>
                <td id="n-1">1</td>
                <td id="n-2">2</td>
                <td id="n-3">3</td>
            </tr>
            <tr>
                <td id="n-4">4</td>
                <td id="n-5">5</td>
                <td id="n-6">6</td>
            </tr>
            <tr>
                <td id="n-7">7</td>
                <td id="n-8">8</td>
                <td id="n-9">9</td>
            </tr>
        </table>`

下面是我的事件函数：

document.querySelector(.table1 td).addEventListener('click',function(){
        console.log('It works');
        var z = this.value;
        console.log(z);
    });

当我单击表(1)的第一个单元格时，我才会收到控制台输出。我不确定为什么当我单击其他单元格(例如3或7)时，这不起作用。

谢谢!

Answer 1

querySelector()只返回一个元素，在本例中，它返回.table1内的第一个td。如果要将侦听器添加到所有td中，则必须使用querySelectorAll()

​

document.querySelectorAll('.table1 td').addEventListener('click',function(){
    .... // The rest of your code
});

​

更多信息请点击此处：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll