Soy un principiante y quiero saber cómo cambio el color del botón seleccionado utilizando el método de destino.
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> 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>Debe usar el argumento de event que obtiene de la devolución de llamada de clic y el elemento en el que se hizo clic es .target .
Tu puedes hacer:
document.querySelectorAll(".btn")[i].addEventListener("click", function (event) { event.target.style.backgroundColor = "red"; });Pero puedes hacer en su lugar:
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>Su código es actualmente muy ineficiente.
Dentro del bucle for , está volviendo a seleccionar cada botón. En su lugar, debe seleccionarlos una vez fuera del bucle.
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>