英文:
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') when local development
问题
我有以下HTML代码 -
<!DOCTYPE html>
<head>
<title>Intro to Js</title>
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
<script type="text/javascript" src="scripts/index.js"></script>
</head>
<body>
<h1>Introduction to Javascript</h1>
<hr/>
<div id="ResultContainer"></div>
</body>
</html>
以下是javascript scripts/index.js
var resultContainer = document.getElementById("ResultContainer");
resultContainer.innerHTML = "Setting up environment";
以下是css/style.css
body {
margin-top: 20px;
margin-left: 20px;
}
h1 {
font-size: 50px;
}
#ResultContainer {
font-size: 30px;
margin-top: 30px;
padding: 10px;
width: 450 px;
height: 200px;
border: 1px solid black;
}
当我使用start命令运行代码时，我遇到了错误
Uncaught TypeError: resultContainer is null
http://localhost:3000/scripts/index.js:6
但是在codepen中相同的代码运行正常。
有没有办法修复本地的错误？
英文:
I've below HTML code -
<!DOCTYPE html>
<head>
<title>Intro to Js</title>
<link rel="stylesheet" type="text/css" href="css/style.css"> </link>
<script type="text/Javascript" src="scripts/index.js"></script>
</head>
<body>
<h1>Introduction to Javascript</h1>
<hr/>
<div id="ResultContainer"></div>
</body>
</html>
below javascript scripts/index.js
var resultContainer = document.getElementById("ResultContainer");
resultContainer.innerHTML = "Setting up environment";
below is the css/style.css
body {
margin-top: 20px;
margin-left: 20px;
}
h1 {
font-size: 50px;
}
#ResultContainer {
font-size: 30px;
margin-top: 30px;
padding: 10px;
width: 450 px;
height: 200px;
border: 1px solid black;
}
when I run the code using start command I get error
> Uncaught TypeError: resultContainer is null
<anonymous> http://localhost:3000/scripts/index.js:6
But the same code in codepen is running fine.
Any idea how can I fix the error in local?
答案1
得分: 2
Your code is running before the DOM is fully loaded (element does not exist).
To solve the issue you can either place the script at the bottom of the body tag or wrap your code with DOMContentLoaded which will ensure that your code executes only after the page is fully loaded:
window.addEventListener("DOMContentLoaded", (event) => {
var resultContainer = document.getElementById("ResultContainer");
resultContainer.innerHTML = "Setting up environment";
});
英文:
Your code is running before the DOM is fully loaded (element does not exists).
To solve the issue you can either place the script at the bottom of the body tag or wrap your code with DOMContentLoaded which will ensure that your code executes only after the page is fully loaded:
window.addEventListener("DOMContentLoaded", (event) => {
var resultContainer = document.getElementById("ResultContainer");
resultContainer.innerHTML = "Setting up environment";
});
答案2
得分: 0
评论