在循环中未定义的元素,但在我的循环之外被定义。

huangapple go评论59阅读模式
英文:

undefined element in for loop but outside my loop its defined

问题

我有一个关于我的for循环的问题:

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++;
}

在我的循环中,“accordions_content[elementCounter]”不存在,但在循环外部存在,在我的事件监听器外部也存在,所以问题在哪里?

我已经检查过,变量在我的循环外部是否有效。

我的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>
英文:

I have a problem with my for loop:
`

  let accordions = document.getElementsByClassName(&quot;faq-accordion&quot;);
    let accordions_content = document.getElementsByClassName(&quot;faq-accordion__content&quot;);
    let elementCounter = 0;
    for(let accordion of accordions) {
            accordions[elementCounter].addEventListener(&quot;click&quot;, 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:

&lt;div class=&quot;faq&quot;&gt;
            &lt;div class=&quot;faq-accordion&quot;&gt;
                &lt;div class=&quot;faq-accordion__headline&quot;&gt;
                    &lt;h5&gt;Das ist eine Headline&lt;/h5&gt;
                &lt;/div&gt;
                &lt;div class=&quot;faq-accordion__content&quot;&gt;
                    &lt;p&gt;Das ist ein Text&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;faq-accordion&quot;&gt;
                &lt;div class=&quot;faq-accordion__headline&quot;&gt;
                    &lt;h5&gt;Das ist eine Headline&lt;/h5&gt;
                &lt;/div&gt;
                &lt;div class=&quot;faq-accordion__content&quot;&gt;
                    &lt;p&gt;Das ist ein Text&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;faq-accordion&quot;&gt;
                &lt;div class=&quot;faq-accordion__headline&quot;&gt;
                    &lt;h5&gt;Das ist eine Headline&lt;/h5&gt;
                &lt;/div&gt;
                &lt;div class=&quot;faq-accordion__content&quot;&gt;
                    &lt;p&gt;Das ist ein Text&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;  

答案1

得分: 1

这是一个修复:

const accordions = document.getElementsByClassName("faq-accordion");
const accordions_content = document.getElementsByClassName("faq-accordion__content");
let elementCounter = 0;
for (const accordion of accordions) {
  // 现在获取内容并将变量传递给闭包体,一旦初始化,否则闭包内的表达式将在函数调用时执行,
  // 所以 elementCounter 将始终为 3(因为您增加了 3 次),由于您的数组长度为 3,
  // 所以 array[3] 是未定义的(array[3] 将是第 4 个元素)
  const content = accordions_content[elementCounter]; // 在迭代时进行索引
  accordion.addEventListener("click", function() {
    console.log(content);// 并在回调内引用结果
    console.log(elementCounter) // 始终为 3,因为这在项目被点击之前不会执行。因此,如果 accordions_content.length 为 3,那么 accordions_content[3] 是未定义的
  })
  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>
英文:

Here is a fix

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const accordions = document.getElementsByClassName(&quot;faq-accordion&quot;);
  const accordions_content = document.getElementsByClassName(&quot;faq-accordion__content&quot;);
  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(&quot;click&quot;, 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++;
  }

<!-- language: lang-html -->

&lt;div class=&quot;faq-accordion&quot;&gt;
  acc 1
&lt;/div&gt;
&lt;div class=&quot;faq-accordion&quot;&gt;
  acc 2
&lt;/div&gt;
&lt;div class=&quot;faq-accordion&quot;&gt;
  acc 3
&lt;/div&gt;

&lt;div class=&quot;faq-accordion__content&quot;&gt;
  content 1
&lt;/div&gt;
&lt;div class=&quot;faq-accordion__content&quot;&gt;
  content 2
&lt;/div&gt;
&lt;div class=&quot;faq-accordion__content&quot;&gt;
  content 3
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

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>
英文:

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const accordions = document.getElementsByClassName(&quot;faq-accordion&quot;);
for (const accordion of accordions) {
  const content = accordion.querySelector(&quot;.faq-accordion__content&quot;) // This would be a safer way to access your inner element
  accordion.addEventListener(&quot;click&quot;, function() {
    console.log(content);
  })
}

<!-- language: lang-html -->

&lt;div class=&quot;faq&quot;&gt;
  &lt;div class=&quot;faq-accordion&quot;&gt;
    &lt;div class=&quot;faq-accordion__headline&quot;&gt;
      &lt;h5&gt;Das ist eine Headline&lt;/h5&gt;
    &lt;/div&gt;
    &lt;div class=&quot;faq-accordion__content&quot;&gt;
      &lt;p&gt;Das ist ein Text&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;faq-accordion&quot;&gt;
    &lt;div class=&quot;faq-accordion__headline&quot;&gt;
      &lt;h5&gt;Das ist eine Headline&lt;/h5&gt;
    &lt;/div&gt;
    &lt;div class=&quot;faq-accordion__content&quot;&gt;
      &lt;p&gt;Das ist ein Text&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;faq-accordion&quot;&gt;
    &lt;div class=&quot;faq-accordion__headline&quot;&gt;
      &lt;h5&gt;Das ist eine Headline&lt;/h5&gt;
    &lt;/div&gt;
    &lt;div class=&quot;faq-accordion__content&quot;&gt;
      &lt;p&gt;Das ist ein Text&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月24日 00:11:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76749207.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定