我有以下名为
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
发生什么事了？该元素确实存在。当尝试访问函数内的其他元素时，我收到相同的错误。所有其他功能都有效。
可能是脚本在 dom 完成之前运行，请尝试在文档完全加载并准备好后运行脚本。
document.addEventListener("DOMContentLoaded", () => {
injectReviews();
injectUser();
injectSearch();
});