Question

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

问题是，当我尝试从HTML脚本中选择计算器的按钮并向其中添加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

verify(1, putRequestedFor(urlEqualTo(("/my-url"))));仅返回一个元素，在您的情况下，它返回querySelector()内的第一个td 如果要将侦听器添加到所有td，则必须使用.table1：

querySelectorAll()

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

ClickEvent（或查询选择器）无法正常工作

1 个答案: