innerHTML 属性空

Question

第一个文件是'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>

已链接“常见问题解答-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中恢复的问答对象，以防点击第三个文件中的字符串“Our mission”

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

我该如何解决？

Answer 1

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

因为你的数组中只有一个元素，你可以简单地这样做：

  faqCenter[0].innerHTML = result

Answer 2

解决你的第一个问题，innerHTML属性为空，看js能访问的文档：

faq-contents.js 在两个 html 文件中加载，并将点击事件监听器添加到每个 #faq-question.

对于 faq-contents.html，它确实有 .faq-classifications，但没有 #faq-question => forEach 执行了 0 次，导致没有添加事件监听器，因此什么也没做。
对于 index.html，它有 #faq-question 两次，所以点击会触发它（呃）。但是：此页面没有 .faq-classifications => faqCenter = null

您的代码的其他提及：

window.addEventListener("DOMContentLoaded", function() { }); <= 不要直接关闭，在{}里面放一些代码，否则没用。可能你不小心把 }); 放到了文件的高位。
跳过过滤器和 return 东西并使用 forEach 或类似的东西，因为你已经通过 faqCenter.innerHTML = result
得到了结果

innerHTML 属性空

innerHTML property null

javascript

innerhtml

javascript-objects

innerHTML 属性 空

innerHTML property null

javascript

innerhtml

javascript-objects

innerHTML 属性空