[SOLVED] Uncaught TypeError: can't access property "innerHTML", container is null

Uncaught TypeError: can't access property "innerHTML", container is null

I have the following HTML file named 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>

And script file named 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()

The problem is in the inject search function where I get an error:

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

What's going on? The element does exist. When try accessing other elements inside the function I get the same error. All the other functions work.

Solution

It could be that the script is running before the dom is completed , try to run your script after the document is completely loaded and ready.

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