Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML’) when local development

huangapple
go评论96阅读模式
英文:

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') when local development

问题

我有以下HTML代码 -

  1. <!DOCTYPE html>
  2. <head>
  3.     <title>Intro to Js</title>
  4.     <link rel="stylesheet" type="text/css" href="css/style.css"></link>
  5.     <script type="text/javascript" src="scripts/index.js"></script>
  6. </head>
  7. <body>
  8.     
  9.     <h1>Introduction to Javascript</h1>
  10.     <hr/>
  11.     <div id="ResultContainer"></div>
  12.     
  13. </body>
  14. </html>

以下是javascript scripts/index.js

  1. var resultContainer = document.getElementById("ResultContainer");
  2. resultContainer.innerHTML = "Setting up environment";

以下是css/style.css

  1. body {
  2.     margin-top: 20px;
  3.     margin-left: 20px;
  4. }
  6. h1 {
  7.     font-size: 50px;
  8. }
  10. #ResultContainer {
  11.     font-size: 30px;
  12.     margin-top: 30px;
  13.     padding: 10px;
  14.     width: 450 px;
  15.     height: 200px;
  16.     border: 1px solid black;
  17. }

当我使用start命令运行代码时，我遇到了错误

Uncaught TypeError: resultContainer is null
http://localhost:3000/scripts/index.js:6

但是在codepen中相同的代码运行正常。

有没有办法修复本地的错误？

英文:

I've below HTML code -

  1. &lt;!DOCTYPE html&gt;
  2. &lt;head&gt;
  3.     &lt;title&gt;Intro to Js&lt;/title&gt;
  4.     &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;&gt; &lt;/link&gt;
  5.     &lt;script type=&quot;text/Javascript&quot; src=&quot;scripts/index.js&quot;&gt;&lt;/script&gt;
  6. &lt;/head&gt;
  7. &lt;body&gt;
  8.     
  9.     &lt;h1&gt;Introduction to Javascript&lt;/h1&gt;
  10.     &lt;hr/&gt;
  11.     &lt;div id=&quot;ResultContainer&quot;&gt;&lt;/div&gt;
  12.     
  13. &lt;/body&gt;
  14. &lt;/html&gt;

below javascript scripts/index.js

  1. var resultContainer = document.getElementById(&quot;ResultContainer&quot;);
  2. resultContainer.innerHTML = &quot;Setting up environment&quot;;

below is the css/style.css

  1. body {
  2.     margin-top: 20px;
  3.     margin-left: 20px;
  4. }
  6. h1 {
  7.     font-size: 50px;
  8. }
  10. #ResultContainer {
  11.     font-size: 30px;
  12.     margin-top: 30px;
  13.     padding: 10px;
  14.     width: 450 px;
  15.     height: 200px;
  16.     border: 1px solid black;
  17. }

when I run the code using start command I get error

> Uncaught TypeError: resultContainer is null
<anonymous> http://localhost:3000/scripts/index.js:6

Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML’) when local development

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:

  1. window.addEventListener("DOMContentLoaded", (event) => {
  2.   var resultContainer = document.getElementById("ResultContainer");
  3.   resultContainer.innerHTML = "Setting up environment";
  4. });
英文:

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:

  1. window.addEventListener(&quot;DOMContentLoaded&quot;, (event) =&gt; {
  2.   var resultContainer = document.getElementById(&quot;ResultContainer&quot;);
  3.   resultContainer.innerHTML = &quot;Setting up environment&quot;;
  4. });

答案2

得分: 0




```

英文:

the script tag doesn't go in the header as it won't be able to read the boyd elements, put it in the body tag

  1. &lt;!DOCTYPE html&gt;
  2. &lt;head&gt;
  3.     &lt;title&gt;Intro to Js&lt;/title&gt;
  4.     &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;&gt; &lt;/link&gt;
  5. &lt;/head&gt;
  6. &lt;body&gt;
  7.     
  8.     &lt;h1&gt;Introduction to Javascript&lt;/h1&gt;
  9.     &lt;hr/&gt;
  10.     &lt;div id=&quot;ResultContainer&quot;&gt;&lt;/div&gt;
  11.     &lt;script type=&quot;text/Javascript&quot; src=&quot;scripts/index.js&quot;&gt;&lt;/script&gt;
  12. &lt;/body&gt;
  13. &lt;/html&gt;

huangapple
  • 本文由 发表于 2023年7月13日 13:17:49
  • 转载请务必保留本文链接：https://go.coder-hub.com/76676141.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定