Question 356562 in Html Question posted in
Some basic documentation can be found here.

Html – The error "Uncaught TypeError TypeError: Cannot set properties of null"

This error is showing up only when I have 2 different files for html and js. even if i add " document.addEventListener(‘DOMContentLoaded’, function() {
countEl.addEventListener("click", increment);
});"

Given below are the code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
    //<link rel="stylesheet" href="./index.css">
</head>

<body>
    <h1>People entered:</h1>
    <h2 id="count-el">0</h2>
    <button id="increment-btn" onclick="increment()">INCREMENT</button>
    <button id="save-btn" onclick="save()">SAVE</button>
    
</body>

</html>




let count = 0;
      let countEl = document.getElementById("count-el")

        function increment() {
            count = count + 1;
            countEl.innerText = count;

        }
        increment();
        function save(){
            console.log(count);
        }

        document.addEventListener('DOMContentLoaded', function() {
            countEl.addEventListener("click", increment);
        });

it either shows error for the line "countEl.innerText = count;" or for "INCREMENT" and "SAVE" button, the error shows for button if i remove listners is "Uncaught ReferenceError: increment is not defined" i want to make this work in two different file ie, html and js two seperate files. Refer to the image as well.

enter image description here
when click on increment button every time the count should be added +1. and when click on save the count should stop with the last cilcked number.

Tags:

2

Answers


  1. 0

    It’s because of page loading. when page is loading your DOM element is empty so it can’t find your preferred element. Change your JS code to this way, it will work for you.

    let countEl = null
window.addEventListener('load', function () {
    countEl = document.getElementById("count-el");
    increment();
})
let count = 0;
function increment() {
    count = count + 1;
    countEl.innerText = count;
}

function save() {
    console.log(count);
}
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <h1>People entered:</h1>
    <h2 id="count-el">0</h2>
    <button id="increment-btn" onclick="increment()">INCREMENT</button>
    <button id="save-btn" onclick="save()">SAVE</button>
</body>

</html>
    Login or Signup to reply.
  2. 0

    I would suggest you take the script tag to the bottom of the body tag. It current position makes it load before the body DOM gets loaded.

    Should be something like this:

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <h1>People entered:</h1>
    <h2 id="count-el">0</h2>
    <button id="increment-btn" onclick="increment()">INCREMENT</button>
    <button id="save-btn" onclick="save()">SAVE</button>
    <script src="./index.js"></script>
</body>

    Then fix the JavaScript a bit. I don’t see the need for adding click event listeners when using the onclick HTML attributes. Just call the function directly.

      let count = 0;
  let countEl = document.getElementById("count-el")

  function increment() {
      count = count++;
      countEl.innerText = count;
  }

  function save(){
      console.log(count);
  }

    Hopefully this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search