I’m trying to change the class of an specific div that i click, using this:
let divs = document.querySelectorAll('.x');
function idk(){
Array.prototype.forEach.call(divs, function(element) {
element.classList.add('y');
Array.prototype.forEach.call(divs, function(element) {
element.classList.remove('x');
});
});
}.y{
transition: 0.5s;
transform: rotateY(180deg);
}<div id="d1">
<div id="c1" class="x" onclick="idk()">a</div>
<div id="c2" class="x" onclick="idk()">b</div>
<div id="c3" class="x" onclick="idk()">c</div>
</div>This code above works well, but only in all divs at the same time, not with only that I’ve clicked
>Solution :
There is no need for ids and you should not use inline event attributes like onclick and instead separate your JavaScript from your HTML and use the standard .addEventListener() instead.
Also, no need for Array.prototype.forEach() as .forEach is supported on the node list returned from querySelectorAll().
To get the index, just use the index parameter that .forEach() exposes:
document.querySelectorAll(".x").forEach(function(element, index){
element.addEventListener("click", function(event){
console.log(index);
});
});<div class="x">a</div>
<div class="x">b</div>
<div class="x">c</div>But, in order to change the class of the clicked element, you can just access the clicked element directly from within the event handler with the this keyword:
document.querySelectorAll(".x").forEach(function(element, index){
element.addEventListener("click", function(event){
// Within a DOM element event handling function, the keyword
// "this" will reference the element that triggered the event.
this.classList.remove("x");
this.classList.add("y");
});
});.x { color: blue; }
.y {
color: red;
transition: 1.5s;
transform: rotateY(180deg);
}<div class="x">a</div>
<div class="x">b</div>
<div class="x">c</div>