injectSearch函数报Uncaught TypeError: searchContainer为null的原因？

问题场景 #

我有一个index.html文件和script.js脚本文件，injectSearch函数执行时总是报错找不到#CK-search元素，但元素明明存在，且其他操作DOM的函数（injectReviews、injectUser）都能正常运行。

index.html 代码： #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Components test</title>
    <script src="/script.js"></script>
</head>
<body>
    <h1>All reviews:</h1>
    <div id="CK-reviews"></div>
    
    <h1>All users:</h1>
    <div id="CK-users"></div>

    <h1>Search Users</h1>
    <div id="CK-search"></div>
</body>
</html>

script.js 代码： #

// Fetch calls for data

const get = async (id, filters, url) => {

    const encodedFilters = btoa (JSON.stringify (filters))

    const rawResponse = await fetch (url, {headers: {
        "id": id,
        "filters": encodedFilters
    }})

    const response = await rawResponse.json()
    
    return response
}

const post = async (createData, url) => {
    const rawResponse = await fetch (url, {body: JSON.stringify (createData)})
    const response = await rawResponse.json()

    return response
}


// Inject data into correct divs

const injectReviews = async () => {
    const data = await get ("655643cd1c82275babfaf859", {title: "Thank you"}, "http://localhost:3000/api/reviews/add")

    const reviews = data.reviews

    const reviewsContainer = document.getElementById("CK-reviews")

    let injectHtml = ""

    for (let i = 0; i < reviews.length; i++) {
        injectHtml += `
        
        <div class="CK-review">
            <h1 class="CK-review-title">${reviews[i].title}</h1>
            <b>${reviews[i].stars}</b>
            <p class="CK-search-text">${reviews[i].text}</p>
        </div>`
    }

    reviewsContainer.innerHTML += injectHtml
}

const injectUser = async () => {
    const data  = await get ("64e15d2329617fb0163de018", {}, "http://localhost:3000/api/user")
    const users = data.user

    const usersContainer = document.getElementById("CK-users")

    let injectHtml = ""

    for (let i = 0; i < users.length; i++) {
        injectHtml += `
        
        <div class="CK-user">
            <h1 class="CK-user-name">${users[i].name}</h1>
        </div>`
    }

    usersContainer.innerHTML += injectHtml
}

const injectSearch = () => {
    const searchContainer = document.getElementById("CK-search")
    searchContainer.innerHTML = `<input type="text" placeholder="Search for anyone"/>`
}


injectReviews()
injectUser()
injectSearch()

报错信息： #

Uncaught TypeError: can't access property "innerHTML", searchContainer is null
    injectSearch http://localhost:5500/script.js:70
    <anonymous> http://localhost:5500/script.js:76
script.js:70:5
    injectSearch http://localhost:5500/script.js:70
    <anonymous> http://localhost:5500/script.js:76

原因分析 #

核心问题是脚本执行时机不对：你的script标签放在了<head>里，浏览器会优先加载并执行这个脚本，此时<body>里的DOM元素还没被渲染出来。

为什么另外两个函数没报错？因为injectReviews和injectUser是async函数，里面有await fetch请求——这个等待网络请求的过程会让浏览器有时间去渲染后续的DOM元素，等请求完成后，目标元素已经存在了，所以能正常获取。而injectSearch是同步函数，一执行就去拿元素，这时候#CK-search还没被创建，自然返回null。

解决方法 #

任选以下一种方案即可：

1. 把脚本移到<body>末尾
   将<script>标签放到</body>标签之前，确保DOM完全渲染后再执行脚本：

<body>
    <h1>All reviews:</h1>
    <div id="CK-reviews"></div>
    
    <h1>All users:</h1>
    <div id="CK-users"></div>

    <h1>Search Users</h1>
    <div id="CK-search"></div>

    <script src="/script.js"></script>
</body>

2. 给脚本添加defer属性
   在<script>标签上加上defer，浏览器会在DOM加载完成后再执行脚本：

<script src="/script.js" defer></script>

3. 监听DOMContentLoaded事件
   在JS代码里，把函数调用包裹在DOM加载完成的事件监听里：

document.addEventListener('DOMContentLoaded', () => {
    injectReviews()
    injectUser()
    injectSearch()
})

内容的提问来源于stack exchange，提问作者Ethan