I have 2 squares in a <table> and I want that when I click one, it become black and the other don't.
My current code is working but I gave them the same function and id, so when I click the first, it work well, but when I click the second, it's the first one that changes.
I know whats wrong, but I don't know how to correct it without having to create a function for each id.
Let's say I want 100 squares, I won't write one function to each one, so what can I do?
function myFunc() {
var element = document.getElementById("cc");
element.classList.toggle("th");
}table,
th,
td {
border: solid black 1px;
width: 100px;
height: 100px;
}
.th {
background-color: black;
}<table>
<tr>
<th onclick="myFunc(this)" id="cc"></th>
<th onclick="myFunc(this)" id="cc"></th>
</tr>
</table>First of all, and more important: id must be unique, thats why it is called id (identifier).
Said that, I will show you two options to solve your question:
1. The better option:
Don't add any inline (direct in HTML) onclick listener. Add a common class to all <th>, then in Javascript add a single listener to each element that has the class, and use this inside the function, since this scope will be the clicked element.
Example:
let allTh = document.querySelectorAll(".clickableTh").forEach(x => x.onclick = myFunc)
function myFunc() {
this.classList.toggle("th");
}table, th, td {
border:solid black 1px;
width:100px;
height:100px;
}
.th {
background-color:black;
}<table>
<tr>
<th class="clickableTh"></th>
<th class="clickableTh"></th>
<th class="clickableTh"></th>
<th class="clickableTh"></th>
<th class="clickableTh"></th>
<th id="cc" class="notClickableTh"></th>
</tr>
</table>2. Keeping your current structure:
As said in the comments, you pass this as parameter (onclick="myFunc(this)"), then inside myFunc you don't need to find the element, you'll already have it in as parameter.
Click below to see the snippet code of example
function myFunc(elem) {
elem.classList.toggle("th");
}table, th, td {
border:solid black 1px;
width:100px;
height:100px;
}
.th {
background-color:black;
}<table>
<tr>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th id="cc"></th>
</tr>
</table>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments