innerHTML属性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>

如果要单击第三文件中的字符串“我们的使命”，我想显示在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

innerhtml javascript javascript-objects