Solution 1 :

I’ve corrected a few issues below. You need to use document rather than document.body. You need to ensure the dom has completed loading so I added a content loaded event listener.

<!DOCTYPE html>
<html>
  <head>
    <title>Cat Clicker</title>
    <script>
      'use strict'
      document.addEventListener("DOMContentLoaded", function() {
        var cat = document.getElementById("cat");
        var counter = document.getElementById("counter");
        var meter = 0;
        function incClick() {
          meter++;
          counter.innerHTML = meter;
        };

        cat.addEventListener('click', incClick);
      });
    </script>
  </head>
  <body>
    <p id="counter" >0</p>
    <h1 id="cat" src="img/cat1.jpg" alt="cat"></h1>
  </body>
</html>

Solution 2 :

You need to include <script> Tags after the body of the HTML DOC or at least at the very end of your HTML content.

This is b/c how the DOM operates. It loads everything in a sequential order, thus your script it attempting to target an element which doesn’t yet exist in the DOM

Solution 3 :

Just put your script tag after the body tag because I think the problem is that the DOM is rendering after the script runs.

And you can also use document.getElementById instead of document.body.getElementById

Solution 4 :

just use onclick=”incClick()” in your h1 tag , or u can define it as image

Solution 5 :

<!DOCTYPE html>
<html>

<head>
  <title>Cat Clicker</title>
</head>

<body>
  <p id="counter">0</p>
  <h1 id="cat" src="img/cat1.jpg" alt="cat"></h1>
   <p class="counter">0</p>
    <img class="cat" src="img/cat2.jpg" alt="cat">

   <!--
       You need to put the script tag at the end of the body
       Because the document must first be created
    -->
    <script>
          'use strict'
        var cat = document.getElementById("cat");
        var counter = document.getElementById("counter");
        var meter = 0;

        function incClick() {
              meter++;
          counter.innerHTML = meter;
        };

       cat.addEventListener('click', incClick);

    </script>
</body>

</html>

Solution 6 :

This worked for me. You are mistakenly calling getElementById from document.body where it doesn’t exist. It is document.getElementById:

<!DOCTYPE html>
<html>

<head>
  <title>Cat Clicker</title>
  <script>
    'use strict'
    var cat = document.getElementById("cat");
    var counter = document.getElementById("counter");
    var meter = 0;

    function incClick() {
      meter++;
      counter.innerHTML = meter;
    };

    cat.addEventListener('click', incClick);
  </script>
</head>
<body>
  <p id="counter">0</p>
  <h1 id="cat" src="img/cat1.jpg" alt="cat"></h1>
  <!-- <p class="counter">0</p>
    <img class="cat" src="img/cat2.jpg" alt="cat"> -->
</body>

</html>

Problem :

I’m writing a simple Cat Clicker app with HTML and JS, but this code keeps spitting ‘Cannot read property ‘getElementById’ of null’ error.

What’s wrong with it??

<!DOCTYPE html>
<html>
  <head>
    <title>Cat Clicker</title>
    <script>
      'use strict'
      var cat = document.getElementById("cat");
      var counter = document.getElementById("counter");
      var meter = 0;
      function incClick() {
        meter++;
        counter.innerHTML = meter;
      };

      cat.addEventListener('click', incClick);
    </script>
  </head>
  <body>
    <p id="counter" >0</p>
    <img id="cat" src="img/cat1.jpg" alt="cat">
  </body>
</html>

Comments

Comment posted by evolutionxbox

I think code is running before the DOM is ready. Put the script before the closing body tag?

Comment posted by norbitrial

Or just simply use

Comment posted by evolutionxbox

@norbitrial yeah

Comment posted by emd

Your h1 tag has a mistake, src and alt needs to go inside

Comment posted by Seif A.

this was a mistake of my trails, I edited it already. it’s supposed to be an img tag

Comment posted by Seif A.

Yes, thank you. It works now. I totally forgot about this DOM readiness thing

Comment posted by evolutionxbox

The snippet might confuse things as it doesn’t replicate the OP’s initial code. You are correct about

Comment posted by evolutionxbox

Yes, but the snippet also fixes one of the main problems with the OPs code. Without mentioning that fix the OP will not solve their problem.

By

Leave a Reply

Your email address will not be published. Required fields are marked *