CODEWITHSUNDEEP
javascripthtmlcss
Caio Reis
Caio Reis

Reputation: 3

How can i get a index value of a div just clicking on it?

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

Upvotes: 0

Views: 78

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65825

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>

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206347

  • Don't use onclick inline attributes, JS should be in one place only and that's the respective tag or file. Use addEventListener instead
  • Use classList.toggle to toggle your "y" className

const divs = document.querySelectorAll('.x');

const divClickHandler = (evt) =>  {
  const elThis = evt.currentTarget;  
  divs.forEach((el) => el.classList.toggle("y", el === elThis ));
  console.log(elThis.id); // You don't need this
};

divs.forEach((el) => el.addEventListener("click", divClickHandler));
.x { background: gray; }
.y { background: gold; }
<div id="d1">
  <div id="c1" class="x">1</div>
  <div id="c2" class="x">2</div>
  <div id="c3" class="x">3</div>
</div>

as you can see from the example above, you can extract the ID, but you don't necessarily need it.

Upvotes: 0

Grambam
Grambam

Reputation: 554

You could pass in the div ID to the test function like

<div id="c3" class="x" onclick="idk('c3')"></div>

then your test function could look like:

function test(id){
  let foundDiv = document.getElementById(d)
  foundDiv.classList.add('y');
  foundDiv.classList.remove('x');
}

Upvotes: -1

Related Questions