我的函数在 JavaScript 中不起作用两次

Question

我有一个包含许多行和列的 table，我想在 [=20] 中更改占位符文本 'Cell 1' 和 'Cell 2'（在第 1 列和第 2 列中） =]td 细胞到 'Success'.

我已经编写了一个函数来执行此操作，但它只会在我单击它时更改第一个单元格，而在我尝试单击它们时不会更改其他单元格。

document.querySelector('td').addEventListener('click', button8Click);

function button8Click() {
    document.querySelector('td').innerHTML = "Success";
}

我需要专门针对 td 元素，我以为我这样做了，但我处于停滞状态。

Answer 1

我猜你不知道 querySelector 是如何工作的。它选择第一个 td 元素。这就是它只工作一次的原因。

你需要这样的东西：

function changeContent(i) {
    document.querySelectorAll('td')[i].innerHTML = "Success";
}

这将更改编号为 i 的 td 元素。

Answer 2

querySelector() 方法 returns 匹配文档中指定的 CSS 选择器的第一个元素。如果您需要向所有 td 元素添加功能，请尝试

 Array.from(document.getElementsByTagName('td')).forEach(it => {it.addEventListener('click', button8Click)})

您还需要更改您的功能以识别单击了哪一行并应进行更改。

function button8Click(event) {
    event.target.innerHTML = "Success";
}

我的函数在 JavaScript 中不起作用两次

My function doesn't work twice in JavaScript

javascript

variables

function

event-handling

dom-events