como puede ver, tengo mucho código repetitivo a continuación...
var c0 = document.getElementById('c0'); var c1 = document.getElementById('c1'); var c2 = document.getElementById('c2'); var c3 = document.getElementById('c3'); var c4 = document.getElementById('c4'); var c5 = document.getElementById('c5'); var c6 = document.getElementById('c6'); var c7 = document.getElementById('c7'); var c8 = document.getElementById('c8'); var c9 = document.getElementById('c9'); var c10 = document.getElementById('c10'); var c11 = document.getElementById('c11'); c0.addEventListener("click", function() {revealCard(0); }); c1.addEventListener("click", function() {revealCard(1); }); c2.addEventListener("click", function() {revealCard(2); }); c3.addEventListener("click", function() {revealCard(3); }); c4.addEventListener("click", function() {revealCard(4); }); c5.addEventListener("click", function() {revealCard(5); }); c6.addEventListener("click", function() {revealCard(6); }); c7.addEventListener("click", function() {revealCard(7); }); c8.addEventListener("click", function() {revealCard(8); }); c9.addEventListener("click", function() {revealCard(9); }); c10.addEventListener("click", function() {revealCard(10); }); c11.addEventListener("click", function() {revealCard(11); });Así que quiero acortar esto obviamente creando un bucle for. Hice esto de la siguiente manera:
var c = []; for(i=0; i<12; i++) { c[i] = document.getElementById('c'+i); c[i].addEventListener("click", function() {revealCard(i); }); }Desafortunadamente, no funcionó. No encontré una pregunta similar, así que aquí estoy. No tengo ningún error en la consola, por lo que es extraño para mí. Todo parece estar correcto pero sigue sin funcionar. te agradeceria que me ayudaras.
Una forma más preferible sería agregar una class al padre conjunto de esos elementos y usar addEventListener en él. De esa manera, con el burbujeo de eventos , puede escuchar un evento de clic y actuar de acuerdo con el elemento especificado.
Por ejemplo,
const wrapper = document.querySelector('.wrapper'); wrapper.addEventListener('click', event => { console.log(event.target.id) }) <div class="wrapper"> <button class="some-button" id="c0"> c0 </button> <button class="some-button" id="c1"> c1 </button> <button class="some-button" id="c2"> c2 </button> </div>Puede modificar el código y usarlo así:
let obj = {}; for(let i=0; i<12; i++) { obj[`c${i}`] = document.getElementById(`c${i}`); obj[`c${i}`].addEventListener("click", function() {revealCard(i); }); }No declaraste tu variable i que causó un error, intenta usar let
var c = []; for (let i = 0; i < 3; i++) { c[i] = document.getElementById('c' + i); c[i].addEventListener("click", function() { console.log(i); }); } <div id="c0">test</div> <div id="c1">test</div> <div id="c2">test</div>