Estoy tratando de hacer un bucle for en un bloque de respuesta y quiero que la respuesta tenga una altura de 30 px. Intenté agregar un evento al bloque pero no funcionó conmigo, ¿por qué?
aquí está mi solución:
Código HTML:
<div class="blocks block-1"> <div class="questionContainer"> <div class="questions">How many team members can I invite?</div> <div class="answers"> You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan. </div> </div> </div> <div class="blocks block-2"> <div class="questionContainer"> <div class="questions">What is the maximum file upload size?</div> <div class="answers"> No more than 2GB. All files in your account must fit your allotted storage space. </div> </div> </div>Código JavaScript:
const block = document.getElementsByClassName(".blocks"); const answers = document.getElementsByClassName(".answers"); for (i = 0; i < block.length; i++) { block[i].addEventListener("click", () => { answers[i].style.height = "30px"; }); }Imagino que estás buscando este resultado.
const All_blocks = document.querySelectorAll('.blocks'); All_blocks.forEach( blk => { blk.addEventListener('click', () => { blk.classList.toggle('show_answer') }) }) .blocks { margin : .5em; padding : .3em; } .questions { color : darkblue; cursor : pointer; } .blocks .answers { visibility: hidden; } .blocks.show_answer .answers { visibility: visible; } <div class="blocks block-1"> <div class="questionContainer"> <div class="questions">How many team members can I invite?</div> <div class="answers"> You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan. </div> </div> </div> <div class="blocks block-2"> <div class="questionContainer"> <div class="questions">What is the maximum file upload size?</div> <div class="answers"> No more than 2GB. All files in your account must fit your allotted storage space. </div> </div> </div>answers también son una colección (al igual que un block ), por lo que no puede configurar el estilo directamente. Pero para su caso, realmente no tiene mucho sentido mirar toda la colección de todos modos.
Si desea establecer el estilo en el elemento de answers dentro del bloque alternado, debe seleccionarlo específicamente.
Además, AFAIK, el evento de toggle solo funciona en elementos <details> . Un enfoque estándar para esto es manejar el evento "clic" en su lugar, y activar y desactivar una clase en el elemento usando la función classList.toggle() .
Manifestación:
const blocks = document.querySelectorAll(".blocks"); for (i = 0; i < blocks.length; i++) { blocks[i].addEventListener("click", function(e) { let answer = this.querySelector(".answers"); answer.classList.toggle("hidden"); }); } .answers { height:30px; } .hidden { display:none; } <div class="blocks block-1"> <div class="questionContainer"> <div class="questions">How many team members can I invite?</div> <div class="answers hidden"> You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan. </div> </div> </div> <div class="blocks block-2"> <div class="questionContainer"> <div class="questions">What is the maximum file upload size?</div> <div class="answers hidden"> No more than 2GB. All files in your account must fit your allotted storage space. </div> </div> </div>La primera vez que desee usar el evento DOM, agregue el conmutador classList en un NODO. Debe distinguir entre el evento Dom y el estilo Dom. No encuentro el conmutador de evento DOM en w3schools. https://www.w3schools.com/jsref/dom_obj_event.asp
editar: pruebo console.log(blocks) para usted document.getElementsByClassName(".blocks"). Nodo DOM de tener 2 clases y resultado HTMLCollection emty. Debe utilizar querySelectorAll