Question 214244 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – undefined element in for loop but outside my loop its defined

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Since you posted your html, here is a snippet that match better your case.

    const accordions = document.getElementsByClassName("faq-accordion");
for (const accordion of accordions) {
  const content = accordion.querySelector(".faq-accordion__content") // This would be a safer way to access your inner element
  accordion.addEventListener("click", function() {
    console.log(content);
  })
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search