Traté de hacer que un elemento apareciera después de que un usuario hiciera clic en una imagen. Usé classlist.toggle para eso, pero cuando hago clic en la imagen, aparece el mensaje de error "Error de tipo no detectado: no se puede leer la propiedad 'alternar' de indefinido" en la consola. Y por supuesto que no está funcionando 🙁
const plusbtn = document.querySelector(".btn-img"); const drop = document.getElementsByClassName("boxes") plusbtn.addEventListener('click', () => { drop.classList.toggle("box-drop"); }) .boxes { border: 1px solid rgba(39, 81, 197, 0.39); margin-top: 50px; padding: 15px; display: none; flex-direction: row; justify-content: space-around; } .btn-img { align-self: center; filter: grayscale(50%); cursor: pointer; } .box-drop { display: flex; } <section> <h1>RESOURCES</h1> <div class="resource-boxes"> <div class="box1"> <div class="top"> <img src="../images/plus.png" alt="" class="btn-img"> </div> <div class="boxes"> <a href=""> <div class="minibox"> <span class="minibox-txt">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam, enim! </span> </div> </a> </div> </div> </div> </section>getElementsByClassName devuelve una HTMLCollection . Debe recorrer todos los elementos de esa colección para poder acceder a ellos.
Pero , dado que ya usa .querySelector() , también podría
.querySelectorAll() que devuelve una NodeList que ofrece por defecto un .forEach().u-none{ display: none; } const EL_btnPlus = document.querySelector(".btn-img"); const ELS_drop = document.querySelectorAll(".boxes"); EL_btnPlus.addEventListener('click', () => { ELS_drop.forEach(EL => EL.classList.toggle("u-none")); }); .boxes { display: flex; } /* Utility classes */ .u-none { display: none; } <img class="btn-img" src="https://lh3.googleusercontent.com/a/AATXAJzyljorAsMuzZ3OQ6B7g_2EU0bkA4lk3iH076AR=k-s64" alt=""> <div class="boxes u-none">Box one</div> <div class="boxes u-none">Box two</div>drop es una lista de elementos (ver el valor de retorno de getElementsByClassName ). Tienes que recorrerlo y alternar la clase en cada elemento individual:
const plusbtn = document.querySelector(".btn-img"); const drop = [...document.getElementsByClassName("boxes")]; plusbtn.addEventListener('click', () => { drop.forEach(e => e.classList.toggle("box-drop")); }) .boxes { border: 1px solid rgba(39, 81, 197, 0.39); margin-top: 50px; padding: 15px; display: none; flex-direction: row; justify-content: space-around; } .btn-img { align-self: center; filter: grayscale(50%); cursor: pointer; } .box-drop { display: flex; } <section> <h1>RESOURCES</h1> <div class="resource-boxes"> <div class="box1"> <div class="top"> <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1" alt="" class="btn-img"> </div> <div class="boxes"> <a href=""> <div class="minibox"> <span class="minibox-txt">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam, enim! </span> </div> </a> </div> </div> </div> </section>