Uncaught TypeError: Cannot set property 'onclick' of null error on vanilla js but not in jquery

Question

I have two pages, page1.html & page2.html, they link to the same javascript file. This is the markup for page 1

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <button class="button">HIT ME</button>
    <div class="trig"></div>
</body>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</html>

and page 2

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button class="button_2">HIT ME</button>
</body>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</html>

and this is the script

document.querySelector(".button").onclick = function(){
    document.querySelector(".trig").style.display = "block";
}

When I refresh page 2 I get

Uncaught TypeError: Cannot set property 'onclick' of null error

obviously because it can't find the .button class

But when I write the same thing in jquery it runs gracefully with no errors in both pages.

$('.button').click(function(){
    $('.trig').show();
});

I want to understand why this happens and how to write the same thing in vanilla js without getting any errors.

there is no element with the class .button on your second page — Kevin Kloet
– Kevin Kloet, Commented Sep 29, 2017 at 9:28

gurvinder372 · Accepted Answer · 2017-09-29 09:37:14Z

3

I want to understand why this happens and how to write the same thing in vanilla js without getting any errors.

Because when the element with button class doesn't exists, then $('.button') doesn't return null, while document.querySelector(".button") does.

You need to check for null first with vanila js apis

var button = document.querySelector(".button");
button && ( button.onclick = function(){
    document.querySelector(".trig").style.display = "block";
});

edited Sep 29, 2017 at 9:37

answered Sep 29, 2017 at 9:27

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jay Over a year ago

I tried your solution but I'm getting Uncaught ReferenceError: Invalid left-hand side in assignment

gurvinder372 Over a year ago

@Jay Sorry, I have updated the answer. Just had to wrap the second part in braces.

ItsPete · Accepted Answer · 2019-07-04 01:48:55Z

When the page load starts it will execute the code that is in JS. Trying to execute document.querySelector('button') ... at this moment will fail because the document (DOM) has not yet been done (parsing), so it does not have the button element yet.

This has two solutions:

Use the defer in the <script> tag. That will tell the browser to execute the JS after the () of the whole page.
```
<script src="script.js" defer></script>
```
Grab the <script src="script.js"></script> and put in before the end of the </body> tage. With this, the JS will only run after the page is complete.

archeal anie · Accepted Answer · 2017-09-29 09:29:43Z

-1

because you write it in wrong way.

you should use it like

$('.button').on("click", function(){
    document.querySelector(".trig").style.display = "block";
});

answered Sep 29, 2017 at 9:29

archeal anie

2602 silver badges12 bronze badges

1 Comment

Jay Over a year ago

I don't want to combine jquery and plain javascript.

Collectives™ on Stack Overflow

Uncaught TypeError: Cannot set property 'onclick' of null error on vanilla js but not in jquery

3 Answers 3

2 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Related