I'm trying to make a for loop on an answer block and i want to make the answer have an height of 30px i tried add to the block an event but it didn't work with me, so why?
here is my solution:
HTML code:
<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>
JavaScript code:
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";
});
}
I imagine you are looking for this result?
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 is also a collection (just like block), so you can't set the style on it directly. But for your case it doesn't really make much sense to look at the whole collection anyway.
If you want to set the style on the answers element within the toggled block you need to select it specifically.
Also AFAIK the toggle event only works on <details> elements. A standard approach to this is to handle the "click" event instead, and switch a class on and off on the element using the classList.toggle() function.
Demo:
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>The firt you want use DOM event, add classList toggle in a NODE. You must distinguish between Dom event and Dom Style. I'm not found DOM Event toggle in w3schools. https://www.w3schools.com/jsref/dom_obj_event.asp
edit: I try console.log(blocks) for you document.getElementsByClassName(".blocks"). DOM node of have 2 class and result HTMLCollection emty. You must use querySelectorAll