Advertisements
I have a problem with my for loop:
`
let accordions = document.getElementsByClassName("faq-accordion");
let accordions_content = document.getElementsByClassName("faq-accordion__content");
let elementCounter = 0;
for(let accordion of accordions) {
accordions[elementCounter].addEventListener("click", function() {
console.log(accordions_content[elementCounter]);
})
elementCounter++;
}
})`
in my loop "accordions_content[elementCounter]);" does not exist but outside my loop is does exist and outside my eventlistener too, so whats the problem here?
I have alredy checked it, if the variable works outside my loop.
My HTML:
<div class="faq">
<div class="faq-accordion">
<div class="faq-accordion__headline">
<h5>Das ist eine Headline</h5>
</div>
<div class="faq-accordion__content">
<p>Das ist ein Text</p>
</div>
</div>
<div class="faq-accordion">
<div class="faq-accordion__headline">
<h5>Das ist eine Headline</h5>
</div>
<div class="faq-accordion__content">
<p>Das ist ein Text</p>
</div>
</div>
<div class="faq-accordion">
<div class="faq-accordion__headline">
<h5>Das ist eine Headline</h5>
</div>
<div class="faq-accordion__content">
<p>Das ist ein Text</p>
</div>
</div>
</div>
>Solution :
Here is a fix
const accordions = document.getElementsByClassName("faq-accordion");
const accordions_content = document.getElementsByClassName("faq-accordion__content");
let elementCounter = 0;
for (const accordion of accordions) {
// Get the content now and pass the variable to the closure body once initialized,
// else the expression inside the closure will be executed when function is called,
// so elementCounter will always be 3 (because you increment 3 times) and since your arrays
// lengthes are 3 then array[3] is undefined (array[3] would be te 4th element)
const content = accordions_content[elementCounter]; // Make the indexing at iteration time
accordion.addEventListener("click", function() {
console.log(content);// And just reference the result inside the callback
console.log(elementCounter) // always 3, because this is not exectued before the item is clicked. So if accordions_content.length is 3 then accordions_content[3] is undefined
})
elementCounter++;
}
<div class="faq-accordion">
acc 1
</div>
<div class="faq-accordion">
acc 2
</div>
<div class="faq-accordion">
acc 3
</div>
<div class="faq-accordion__content">
content 1
</div>
<div class="faq-accordion__content">
content 2
</div>
<div class="faq-accordion__content">
content 3
</div>