Uncaught TypeError: Cannot set property 'innerHTML' of nulll

Question

Im getting a error menioned above to not use innerHTML please help with this.Getting error in js file. Its just a basic counter im trying to make......

index.html

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <div>
      <h1>Counter</h1>

      <h1 class="counter-display">(..)</h1>
      <button class="counter-minus">-</button>
      <button class="counter-plus">+</button>
    </div>
  </body>
</html>

Script.js

 let counterDisplayElem = document.querySelector('.counter-display');
    let counterMinusElem = document.querySelector('.counter-minus');
    let counterPlusElem = document.querySelector('.counter-plus');
    let count = 0;
    
    updateDisplay();
    
    counterPlusElem.addEventListener("click", () => {
        count++;
        updateDisplay();
    });
    
    counterMinusElem.addEventListener("click", () => {
        count--;
        updateDisplay();
    });
    
    function updateDisplay() {
        counterDisplayElem.innerHTML = count;
    };

It means `counterDisplayElem` is `null` because `querySelector` didnt find the element. Your `querySelector` code is running before the elements have been created — Patrick Evans, Jan 15 '21 at 14:17
Try on document ready, or add your script right before closing `
` and it will work — angel.bonev, Jan 15 '21 at 14:21
Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — angel.bonev, Jan 15 '21 at 14:24

Vahid · Answer 1 · 2021-01-15T14:24:14.390

Put your code in a window's load event handler, then your code will run when your DOM has been loaded and document.querySelector('.counter-display'); can access to the h1 element.

Try this:

<script>
    window.addEventListener('load', () => {
        let counterDisplayElem = document.querySelector('.counter-display');
        let counterMinusElem = document.querySelector('.counter-minus');
        let counterPlusElem = document.querySelector('.counter-plus');
        let count = 0;

        updateDisplay();

        counterPlusElem.addEventListener("click", () => {
            count++;
            updateDisplay();
        });

        counterMinusElem.addEventListener("click", () => {
            count--;
            updateDisplay();
        });

        function updateDisplay() {
            counterDisplayElem.innerHTML = count;
        };
    });
</script>

Thanks it worked placing my script tag at the end of the body tag..:) — Saiprakash Reddy, Jan 15 '21 at 14:30

score 0 · Answer 2 · answered Jan 15 '21 at 14:21

Javascript can't find the elements since the script runs before the DOM is loaded.

You should put your code inside of a function and run it through the body onload.

function loaded() {
  let counterDisplayElem = document.querySelector('.counter-display');
  let counterMinusElem = document.querySelector('.counter-minus');
  let counterPlusElem = document.querySelector('.counter-plus');
  let count = 0;

  updateDisplay();

  counterPlusElem.addEventListener("click", () => {
    count++;
    updateDisplay();
  });

  counterMinusElem.addEventListener("click", () => {
    count--;
    updateDisplay();
  });

  function updateDisplay() {
    counterDisplayElem.innerHTML = count;
  };
}

<body onload="loaded()">
  <div>
    <h1>Counter</h1>

    <h1 class="counter-display">(..)</h1>
    <button class="counter-minus">-</button>
    <button class="counter-plus">+</button>
  </div>
</body>

Another option would be to put the script tag at the end of your <body> rather than inside of <head>

score 0 · Answer 3 · answered Jan 15 '21 at 14:22

Your querySelector functions are probably not finding the HTML elements because they are running before the elements are created.

To prevent this without the use of jQuery you should surround your JS code with this:

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

It's supported by 99 % of browsers.

Uncaught TypeError: Cannot set property 'innerHTML' of nulll

3 Answers3