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

Question

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

34 views Asked by Learning corner At 10 March 2024 at 03:17

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

Original Q&A

There are 2 answers

Amit Sahoo On 10 March 2024 at 04:07

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>

**Bertrand** · Accepted Answer · 2024-03-12T00:29:41+00:00

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).

TechQA.

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

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in EVENT-HANDLING

Related Questions in UNDEFINED

Popular Questions

Popular Tags

Trending Questions