Así que tengo un problema para obtener las identificaciones de mis botones. Mi código solo devuelve el valor de identificación del primer botón de tic y no el resto cuando hago clic en ellos.
aquí está el HTML:
<div class="row"> <div class="col-lg-12"> <a class="btn btn-lg btn-primary tic" id="0">#</a> <a class="btn btn-lg btn-primary tic" id="1">#</a> <a class="btn btn-lg btn-primary tic" id="2">#</a> </div> </div>y aquí está el javascript:
const tick = document.querySelector('.tic'); tick.addEventListener('click', () =>{ var slot = tick.id; console.log(slot); });solo devuelve 0 cuando hago clic en el primer botón pero no devuelve 1 cuando hago clic en el segundo. En cambio, no hace nada. Cualquier ayuda sería genial. Gracias
querySelector devuelve el primer elemento.
En su lugar, use querySelectorAll para seleccionar todos los elementos, recorra cada uno y agregue un detector de eventos de click :
const tick = document.querySelectorAll('.tic'); tick.forEach(e => { e.addEventListener('click', () => { var slot = e.id; console.log(slot); }); }) <div class="row"> <div class="col-lg-12"> <a class="btn btn-lg btn-primary tic" id="0">#</a> <a class="btn btn-lg btn-primary tic" id="1">#</a> <a class="btn btn-lg btn-primary tic" id="2">#</a> </div> </div>O, mejor aún, usa la delegación de eventos:
document.body.addEventListener('click', function(e) { if (e.target.classList.contains("tic")) { console.log(e.target.id); } }) <div class="row"> <div class="col-lg-12"> <a class="btn btn-lg btn-primary tic" id="0">#</a> <a class="btn btn-lg btn-primary tic" id="1">#</a> <a class="btn btn-lg btn-primary tic" id="2">#</a> </div> </div>