Intento cambiar la imagen del icono al hacer clic.
Agrego una clase active para que aparezca el div inferior, luego verifico si parentNode.contains("active") debería tener una imagen, de else debería tener otra imagen
pero este método no funciona y recibo este mensaje
No se pudo ejecutar 'contiene' en 'Nodo': el parámetro 1 no es del tipo 'Nodo'.
¿Como puedo solucionar este problema?
let drops = document.querySelectorAll('.drop'); let imgs = document.querySelectorAll('.drop .inner-right img'); drops.forEach((drop) => { drop.addEventListener("click", function (e) { drop.parentNode.classList.toggle("active"); imgs.forEach((img) => { img.src = `../images/new icons/${e.currentTarget.dataset.img}`; if(drop.parentNode.contains("active")){ }else{ img.src = `../images/${e.currentTarget.dataset.old}`; } }); }); }); .box.active .bottom { opacity: 1; visibility: visible; } .box .bottom { opacity:0; visibility: hidden; } <div class="box desc"> <div class="top drop" data-img="wasf al khotwa-01.svg" data-old="description.png"> <div class="inner-right"> <img src="images/description.png" alt="desc"> <p>Title</p> </div> <i class="fas fa-angle-down"></i> </div> <div class="bottom"> <p> Text </p> </div> </div>realiza el método contiene en un nodo y no en la lista de clases del elemento
Si desea verificar si el nodo tiene una clase específica, puede usar
drop.parentNode.classList.contains("active") let drops = document.querySelectorAll('.drop'); let imgs = document.querySelectorAll('.drop .inner-right img'); drops.forEach((drop) => { drop.addEventListener("click", function(e) { drop.parentNode.classList.toggle("active"); imgs.forEach((img) => { img.src = `../images/new icons/${e.currentTarget.dataset.img}`; if (drop.parentNode.classList.contains("active")) { console.log('win') } else { img.src = `../images/${e.currentTarget.dataset.old}`; } }); }); }); .box.active.bottom { opacity: 1; visibility: visible; } .box.bottom { opacity: 0; visibility: hidden; } <div class="box desc"> <div class="top drop" data-img="wasf al khotwa-01.svg" data-old="description.png"> <div class="inner-right"> <img src="images/description.png" alt="desc"> <p>Title</p> </div> <i class="fas fa-angle-down"></i> </div> <div class="bottom"> <p> Text </p> </div> </div>