英文:
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("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>
答案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("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++;
}
<!-- language: lang-html -->
<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>
<!-- 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("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);
})
}
<!-- language: lang-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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论