undefined element in for loop but outside my loop its defined

July 23, 2023

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>