未捕获（承诺中）类型错误：无法读取 null 的属性“附加”-JS答案

【问题标题】：Uncaught (in promise) TypeError: Cannot read property 'append' of null - JS未捕获（承诺中）类型错误：无法读取 null 的属性“附加”-JS
【发布时间】：2021-09-04 14:49:56
【问题描述】：

无法摆脱这个控制台错误：“Uncaught (in promise) TypeError: Cannot read property 'append' of null”，我对阅读其他几篇堆栈溢出文章的理解是 js 文件在 html 之前运行完成加载。我已经在索引文件关闭之前移动了右侧，并尝试通过执行以下操作来推迟 JS 文件：

document.addEventListener("DOMContentLoaded", function(event) {     
   // copy code here
});

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="styles.css">
        <meta charset="utf-8">
        <title>API Explorer</title>
        <script src="scripts.js" defer></script>
    </head>
    <body>
        <ul class="navbar">
            <li><a href="./index.html">Home</a></li>
            <li><a href="./people.html">People</a></li>
        </ul>
        <h1>API Explorer</h1>
        <div id="data-container">
            <div id="people"></div>
        </div>
    </body>
</html>

scripts.js：

function getDataName(url, div) {
    try {
        fetch(url)
        .then(response => response.json())
        .then(data => showDataName(data.results, div))
    }
    catch(error){
        console.error("Error: " + error)
    }
}


showDataName = (dataObjects, div) => {
    const dataDiv = document.querySelector(div)
    dataObjects.forEach(dataObject => {
        const dataElement = document.createElement('p')
        dataElement.innerText= `Name: ${dataObject.name}`
        dataDiv.append(dataElement)
    })

}

getDataName('https://swapi.dev/api/people/', '#people')

【问题讨论】：

上面写着// copy code here...你也是吗？

标签： javascript html dom dom-events

【解决方案1】：

在showDataName 中，您使用querySelector 定义了dataDiv，但您没有用括号括起选择器，因此它返回null。

所以，script.js 的第 13 行应该是const dataDiv = document.querySelector("div")。

另外，你应该选择#data-container而不是div，因为如果你在它前面添加另一个div，它会选择它。

const dataDiv = document.querySelector("#data-container")

【讨论】：

哇，我是个白痴，非常感谢您指出这一点。这有效！
这没有意义。 div 有第二个参数传递给showDataName()。它从getDataName() 调用时收到的，它的值也作为第二个参数传递给它。 div 的值是 '#people'，如您在最后一行中所见。 It should work just fine like that.