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

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"  onclick="idk()">a</div>
   <div id="c2"  onclick="idk()">b</div>
   <div id="c3"  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

CodePudding user response：

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 >a</div>
<div >b</div>
<div >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 >a</div>
<div >b</div>
<div >c</div>

CodePudding user response：

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

<div id="c3" 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');
}

CodePudding user response：

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" >1</div>
  <div id="c2" >2</div>
  <div id="c3" >3</div>
</div>

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