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 div
s at the same time, not with only that I’ve clicked
Advertisement
Answer
There is no need for id
s 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>