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

Html – Why am i getting error "Uncaught ReferenceError: increment is not defined"

The code looks fine but still gets the error added event handler also



document.addEventListener('DOMContentLoaded', function() {
    
    let count = 0
    let countEl = document.getElementById("count-el")
    function increment() {
        count = count + 1
        countEl.innerText=count;
        // set countEl's innerText to the count
    }
    increment()
countEl.addEventListener("click", increment);
});

<!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>
</body>
</html>

Please check the code, the error shows for this line INCREMENT Specifically for "INCREMENT" in that line

Tags:

2

Answers


  1. 0

    The function increment is defined inside the event listener. So it is inaccessible out side the event listener. So you need to define your function outside of the event listener to access it. You can keep the countEl.addEventListener("click", increment) inside your DOMContentLoaded event and it would work fine.

    <!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>
    <script>
        let count = 0;
        let countEl = document.getElementById("count-el");

        function increment() {
            count = count + 1;
            countEl.innerText = count;
            // set countEl's innerText to the count
        }
        increment();

        document.addEventListener('DOMContentLoaded', function() {
            countEl.addEventListener("click", increment);
        });
    </script>
</body>

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

    A good practice is to avoid polluting global namespaces with variables and constants. In fact, you wasn’t very far at all.

    In your code, it seems there’s a bit of confusion between the rendering of the counter (in h2#count-el I presume) and the trigger (the INCREMENT button).

    document.addEventListener('DOMContentLoaded', function() {
  // define displayer, count and increment action
  const countEl = document.getElementById("count-el")
  let count = 0
  
  function increment() {
      count++
      countEl.innerText=count;
      // set countEl's innerText to the count
  }
  
  // Finally add click event listener on button (not on H2)
  document.getElementById('increment-btn').addEventListener('click', increment);
});

// No pollution of global namespace
console.log(window.increment) // Expect undefined
    <h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">INCREMENT</button> <!-- No more JS here -->

    It also ensures you won’t face errors if one is clicking your button before the script have been loaded (it will simply do nothing).

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

Back To Top
Search