Estoy tratando de cambiar la clase de un div específico en el que hago clic, usando esto:
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> Este código anterior funciona bien, pero solo en todos los div al mismo tiempo, no solo con eso que hice clic
No hay necesidad de id s y no debe usar atributos de eventos en línea como onclick y, en su lugar, separe su JavaScript de su HTML y use el estándar .addEventListener() en su lugar.
Además, no es necesario Array.prototype.forEach() ya que .forEach es compatible con la lista de nodos devuelta por querySelectorAll() .
Para obtener el índice, simplemente use el parámetro de índice que expone .forEach() :
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>Podría pasar el ID de div a la función de prueba como
<div id="c3" class="x" onclick="idk('c3')"></div>
entonces su función de prueba podría verse así:
function test(id){ let foundDiv = document.getElementById(d) foundDiv.classList.add('y'); foundDiv.classList.remove('x'); }