Getting JavaScript Error "Cannot read property 'style' of null" in Dom Manipulation

Question

I just started learning DOM Manipulation and want to do a simple task of changing the font color of h1 using javaScript but I am getting this error - "Cannot read property 'style' of null ". My js file is connected to html but the next line is not working. Please help.

demo.html

<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
    <script type="text/javascript" src="demo.js"></script>
</head>
<body>
<h1>My Website</h1>
</body>
</html>

demo.js

alert("connected");
var h1=document.querySelector("h1");
h1.style.color="pink";

Include the script after the DOM has loaded or wait for the DOM to be loaded — Andrew Li, Jul 01 '17 at 15:24

Dij · Answer 1 · 2017-07-01T15:31:01.983

0

you must load link your js at the end of body. you are mainpulating DOM but it hasn't loaded completely, thats why it is giving you null value. try this:

<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
</head>
<body>
<h1>My Website</h1>
    <script type="text/javascript" src="demo.js"></script>
</body>

or you can use defer in your script tag

<!DOCTYPE html>
    <html>
    <head>
        <title>My Site</title>
        <script type="text/javascript" src="demo.js" defer></script>
    </head>
    <body>
    <h1>My Website</h1>
    </body>

</html>

edited Jul 01 '17 at 15:31

answered Jul 01 '17 at 15:28

Dij

9,501
4
15
34

Thanks. It's working. – Subham Kaps Jul 01 '17 at 15:30

score 0 · Answer 2 · answered Jul 01 '17 at 15:29

0

You must wait that the DOM is loaded.

document.addEventListener('DOMContentLoaded', function(){"put your code here"});

answered Jul 01 '17 at 15:29

J.Francart

3
5

Getting JavaScript Error "Cannot read property 'style' of null" in Dom Manipulation

2 Answers2