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

Question

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

Could you try moving `````` after div tag? So that script will be the last loaded one. — Maniraj Murugan, Mar 03 '22 at 13:34
@ManirajMurugan thank you, your Idea should also work, it was a problem while loading the script, the other solution is cleaner but yours also works, thanks! — phi zim, Mar 03 '22 at 13:38

score 0 · Accepted Answer · answered Mar 03 '22 at 13:36

Just use one of the methods:

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

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

1 Answers1