Я новичок и хочу знать, как изменить цвет выбранной нажатой кнопки с помощью целевого метода?

var buttons = document.querySelectorAll(".btn").length;

for (var i = 0; i < buttons; i++) {
  document.querySelectorAll(".btn")[i].addEventListener("click", function () {
    document.querySelectorAll(".btn").style.backgroundColor = "red";
  });
}
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
0
user8 25 Сен 2021 в 21:24

3 ответа

Лучший ответ

Вам нужно использовать аргумент event, который вы получаете из обратного вызова click, а элемент, на который кликнули, - это .target.

Ты можешь сделать:

document.querySelectorAll(".btn")[i].addEventListener("click", function (event) {
    event.target.style.backgroundColor = "red";
  });

Но вы можете сделать вместо этого:

const buttons = document.querySelectorAll(".btn");

buttons.forEach(btn => {
  btn.addEventListener("click", function (event) {
event.target.style.backgroundColor = "red";
  });
});
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
0
Raz Luvaton 25 Сен 2021 в 18:31

Ваш код в настоящее время очень неэффективен.

Внутри цикла for вы повторно выбираете каждую кнопку. Вместо этого вы должны выбрать их один раз за пределами цикла.

var buttons = document.querySelectorAll(".btn");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function (e) {
    e.target.style.backgroundColor = "red";
  });
}
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
0
Spectric 25 Сен 2021 в 18:34
var buttons = document.querySelectorAll(".btn");

for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", (e) =>{
    e.target.style.backgroundColor = "red";
  });
}
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
0
Otienosteve 25 Сен 2021 в 19:15