Cannot Read AddEventListener of null whenever my Page loads

Question

I've looked at other questions of the same type and still can't figure out what's wrong with mine

I'm creating a simple counter app where you can increase or decrease to get better at JavaScript and wanted to satisfy my curiosity on why this is wrong and not working so I can improve my skills.

Here's my html


    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
    <title>Counter App</title>
  </head>
  <body>
    <div class="container">
      <div class="title"><h1>COUNTER APP</h1></div>
      <div class="display-center"><h1 class="counter">0</h1></div>

      <div class="button-wrapper display-center">
        <button class="decrease">-</button>
        <button class="increase">+</button>
      </div>
    </div>
  </body>
</html>`

here's my JavaScript

var decrease = document.querySelector("decrease");
var increase = document.querySelector("increase");
var counter = document.querySelector("counter");
var contain = document.querySelector("container");
var count = 0;

decrease.addEventListener("click", () => {
    console.log(2);
    count--;
    counter.innerHTML = count;
    console.log(4);
});

increase.addEventListener("click", () => {
    count++;
    counter.innerHTML = count;
    console.log(4);
});

if your script loads before the DOM, then you'll have that issue - i.e. your script tag is in the HEAD, before the BODY even starts to load — Jaromanda X, May 27 '21 at 03:22
`document.querySelector("decrease");` implies that you have a `` element; same for the other selectors. Read the [documentation](//developer.mozilla.org/en-US/docs/Web/API/Document/querySelector). I voted to close as off-topic because it’s caused by a typo, though now my vote is lost after the reopen… — Sebastian Simon, May 27 '21 at 03:24
even if I use the defer attribute it will still be a problem? — Jean Coupet, May 27 '21 at 03:24
Sorry about the bogus duplicate close, `defer` _should_ help. I've re-opened this but @SebastianSimon is right, this is just a typo in your selectors — Phil, May 27 '21 at 03:25
even if I use the defer attribute it will still be a problem? Yeah. — Kerry, May 27 '21 at 03:27
Use selectors like this `.querySelector(".decrease");` `.querySelector(".increase");` `.querySelector(".counter");` `.querySelector(".container");` — Oybek, May 27 '21 at 03:28
You are using tag selectors as @SebastianSimon mentioned. Answering your question about defer, it will work properly with this attribute. Keeping it in `head` is fine. — Oybek, May 27 '21 at 03:29

score 0 · Answer 1 · answered May 27 '21 at 03:35

you have to use "." in querySelector because you are selecting classes.

  var decrease = document.querySelector(".decrease");
  var increase = document.querySelector(".increase");
  var counter = document.querySelector(".counter");
  var contain = document.querySelector(".container");

score -1 · Answer 2 · answered May 27 '21 at 04:54

-1

you have to use "." in querySelector because you are selecting classes. This Should Work:

var decrease = document.querySelector(".decrease");

answered May 27 '21 at 04:54

Dibash Sapkota

58
3

Cannot Read AddEventListener of null whenever my Page loads

2 Answers2