tengo una mesa con 90 botones, que tiene diferentes ID, y quiero que siga así, también tengo botones fuera de la mesa.
<button type="button" onclick="resetState()">reset state</button> <div> <table> <tr> <td><button type="button" onclick="step('1,1')" id="1,1"></button></td> <td><button type="button" onclick="step('1,2')" id="1,2"></button></td> <td><button type="button" onclick="step('1,3')" id="1,3"></button></td> <!-- etc --> <!-- etc --> <td><button type="button" onclick="step('9,7')" id="9,7"></button></td> <td><button type="button" onclick="step('9,8')" id="9,8"></button></td> <td><button type="button" onclick="step('9,9')" id="9,9"></button></td> </tr> </div>Quiero acceder a todos ellos desde una función, cuando hago clic derecho en uno de los 90 botones quiero que suceda algo específico
<script> document.getElementById('1,1').addEventListener('contextmenu', (event) => { event.preventDefault() console.log("6"); }) </script>el problema es que no puedo encontrar algo en común entre ellos aparte del nombre de la etiqueta, pero obviamente hay otros botones, así que no puedo usarlos, quiero darle a la tabla o al div algo que defina todos los botones dentro de él, también repasando y darles la misma clase no es realista, a menos que lo sea? gracias de antemano.
Agregue un detector de clics al <tr> . Si el oyente ve que un botón es el objetivo, verifique su ID.
<div> <table class="button-table"> <tr> document.querySelector('.button-table tr').addEventListener('contextmenu', (e) => { if (!e.target.matches('button')) return; event.preventDefault() console.log(e.target.id); });quiero darle a la tabla o al div algo que defina todos los botones dentro de ella, también revisarlos y darles la misma clase no es realista, a menos que lo sea.
No sería poco realista si está creando todos estos elementos con un motor de plantillas (que recomendaría si es factible); escribirlos todos manualmente es tedioso y propenso a errores.
También puede eliminar todos los controladores de clic en línea si lo desea. (Son una práctica horrible. )
document.querySelector('.button-table tr').addEventListener('contextmenu', (e) => { if (!e.target.matches('button')) return; event.preventDefault() step(...e.target.id.split(',').map(Number)); });Tradicionalmente, les daría a todos la misma clase y luego usaría algo como document.getElementsByClassName() para iterar sobre ellos.
jQuery lo hace aún más fácil, si desea seguir ese camino.