Uncaught TypeError: Cannot read properties of null (reading 'style') [JS]

expected outcome: div "test" should be shown,

but error in console: "Uncaught TypeError: Cannot read properties of null (reading ‘style’)"

It already worked in the past but somehow it stopped working (I guess it stopped when splitting html, css and js in different files but im not sure)

My simplified source code:

index.html

<link rel="stylesheet" type="text/css" href="./main.css">
<script src="./main.js"></script>
<div id="test"> test </div>

main.css

#test{display: none}

main.js

 //(agree not defined so typeof(agree) == undefined)
 if (agree == undefined) { document.getElementById("test").style.display = "block"; }

what did I do wrong? or is it actualy the splitted file / external js/css

>Solution :

Just use one of the methods:

1. Add defer attribute

<link rel="stylesheet" type="text/css" href="./main.css">
<script defer src="./main.js"></script>
<div id="test"> test </div>

2. Add script after div

<link rel="stylesheet" type="text/css" href="./main.css">
<div id="test"> test </div>
<script src="./main.js"></script>