innerHTML property null

第一个文件是'faq-contents.html'

<!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>

链接的"；faq contents.js"；文件

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>

我想展示问答的对象；A在CCD_ 1中恢复；我们的使命；单击第三个文件中的。

我试图用faqCenter.innerHTML = result显示内容，但innerHTML属性为null。

我该如何修复它？

要解决第一个问题，innerHTML属性为null，请查看js可以访问的文档：

faq-contents.js加载在两个html文件中，并将click-eventlistener添加到每个#faq问题中。

对于faq-contents.html，它确实有.faq分类，但没有#faq问题=>forEach被执行0次，导致没有添加事件侦听器，因此没有执行任何操作。
对于index.html，它有两次#faq问题，所以点击会触发它(duh(。但是：此页面没有。常见问题分类=>faqCenter=空

您的代码的其他提及：

window.addEventListener("DOMContentLoaded", function() { });<=不要直接关闭它，在{}中放入一些代码，否则它将毫无用处。可能是你不小心把});放在了文件的高位。
跳过过滤器并返回内容并使用forEach或类似的东西，因为您已经通过faqCenter.innerHTML = result得到了结果

您使用类名选择faqCenter。在同一页中可以有多个具有相同类的元素，因此"faqCenter"是一个对象数组。

由于数组中只有一个元素，您可以简单地执行以下操作：

faqCenter[0].innerHTML = result

相关内容

最新更新

热门标签：