Моя функция не работает дважды в JavaScript

Question

У меня есть таблица с многочисленными строками и столбцами, и я хочу изменить текст заполнителя, «Ячейка 1» и «Ячейка 2» (в столбцах 1 и 2), в пределах td ячеек на «Успех».

Я написал функцию для этого, но она изменяет только первую ячейку, когда я щелкаю по ней, и никакую другую, когда я пытаюсь щелкнуть по ней.

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

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

Мне нужно специально нацелиться на элемент td , и я подумал, что я так и сделал, но я нахожусь в тупике.

Answer 1

Метод querySelector() возвращает первый элемент, который соответствует указанному CSS селектору (ам) в документе. Если вам нужно добавить функцию ко всем элементам td, попробуйте

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

Также вам нужно изменить функцию, чтобы определить, какая строка нажата и должна быть изменена.

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

Answer 2

Полагаю, вы не знаете, как работает querySelector. Он выбирает первый элемент td. Вот почему он работает только один раз.

Вам нужно что-то вроде этого:

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

Это изменит элемент td с номером i.