i have a table with 90 buttons, that has different ids, and i want to keep that way, i also have buttons outside the table.
<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>
I want to access all of them from a function, when i right click one of the 90 buttons i want something specific to happen
<script>
document.getElementById('1,1').addEventListener('contextmenu', (event) => {
event.preventDefault()
console.log("6");
})
</script>
the problem is that i cant find something in common between them other than the tagname, but obviously there are other buttons so i cant use it, i want to give the table or the div something that defines all the buttons inside it, also going over them and giving them the same class is unrealistic, unless it is? thanks in advance.
Add a click listener to the <tr>. If the listener sees that a button is the target, check its 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);
});
i want to give the table or the div something that defines all the buttons inside it, also going over them and giving them the same class is unrealistic, unless it is?
It wouldn't be unrealistic if you're creating all these elements with a template engine (which I'd recommend if feasible) - typing them all out manually is tedious and error-prone.
You can also remove all of the inline click handlers if you want. (They're horrible practice.)
document.querySelector('.button-table tr').addEventListener('contextmenu', (e) => {
if (!e.target.matches('button')) return;
event.preventDefault()
step(...e.target.id.split(',').map(Number));
});
Traditionally you'd give them all the same class and then use something like document.getElementsByClassName() to iterate over them.
jQuery makes it even easier, if you wanted to go down that route.