Início / coding / Perguntas / 77588658
Accepted
Ethan
Asked: 2023-12-02 08:11:08 +0800 CST

TypeError não capturado: não é possível acessar a propriedade “innerHTML”, o contêiner é nulo

  • 772

Eu tenho o seguinte arquivo HTML chamado 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>

E arquivo de script chamado 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()

O problema está na função de pesquisa de injeção, onde recebo um erro:

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

O que está acontecendo? O elemento existe. Ao tentar acessar outros elementos dentro da função, recebo o mesmo erro. Todas as outras funções funcionam.

javascript

1 respostas

  1. Best Answer

    Pode ser que o script esteja sendo executado antes do dom ser concluído, tente executar o seu script depois que o documento estiver completamente carregado e pronto.

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

relate perguntas