如何解决innerHTML属性null
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="faq-classification">
</div>
<script src="faq-contents.js"></script>
</body>
</html>
const faqContents = [
{order: "00",question: "Our mission",answer: "our mission answer"
},{order:"01",question: "How does Linstock work?",answer: "it works well"
},]
const faqCenter = document.querySelector(".faq-classification")
const questionClicked = document.querySelectorAll("#faq-question")
window.addEventListener("DOMContentLoaded",function() {
});
questionClicked.forEach(function(click){
click.addEventListener("click",function(e) {
const questionsAndAnswer = e.currentTarget.dataset.order;
const restoredFaq = faqContents.filter(function(faqItem){
if(faqItem.order === questionsAndAnswer) {
let result =
`<section id="faq-section">
<div class="faq-classification">
</div>
<div class="faq-main-contents">
<h3 class="faq-question-title">
"${faqItem.question}"
</h3>
<p class="faq-answer-conntents">
"${faqItem.answer}"
</p>
</div>
</section>`
faqCenter.innerHTML = result
return result;
}
})
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Frequently Asked Questions(FAQ)</title>
</head>
<body>
<section id="faq" class="faq">
<div class="faq-category">
<div class="faq-contents">
<h2>About Linstock</h2>
<p id="faq-question" data-order="00"><a href="#faq-contents.html">Our mission</a></p>
<p id="faq-question" data-order="01"> How does Linstock work?</p>
</div>
</div>
</section>
<script src="faq-contents.js"></script>
</body>
</html>
如果要单击第三文件中的字符串“我们的使命”,我想显示在const faqContets
中恢复的问答对象。
我试图用faqCenter.innerHTML = result
显示内容,但是innerHTML属性为null。
我该如何解决?
解决方法
要解决您的第一个问题,innerHTML属性为null,请查看js可以访问的文档:
faq-contents.js都加载到两个html文件中,并将click eventlistener添加到每个#faq-question。
中。-
对于faq-contents.html,它确实具有.faq分类,但没有#faq-question => forEach已执行0次,导致未添加任何事件侦听器,因此无济于事。
-
对于index.html,它有两次#faq-question,因此单击将其触发(duh)。 但是:此页面没有.faq-classifications => faqCenter = null
您的代码的其他提示:
-
window.addEventListener("DOMContentLoaded",function() { });
});放在了文件的高位。 -
跳过过滤器并返回内容,并使用forEach或类似方法,因为您已经通过
faqCenter.innerHTML = result
得出结果了
您正在使用类名选择faqCenter
。您可以在同一页面中拥有多个具有相同类的元素,因此'faqCenter'是一个对象数组。
由于数组中只有一个元素,因此只需执行以下操作:
faqCenter[0].innerHTML = result
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。