How to slove this issues “Uncaught TypeError: Cannot set properties of null when local development [duplicate]”

<!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>

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

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";
});

Leave a comment Cancel reply