Search code examples
javascriptcounter

I want to write a JavaScript program for a simple counter


I wrote this code for my simple counter but it's not running as it should. It is supposed to stop decrementing when the count gets to 0. Please help me check what could be wrong.

let count = 0;

let displayCount = document.getElementById("count")

let incrementElement = document.getElementById("increment");
let decrementElement = document.getElementById("decrement");
let resetElement = document.getElementById("reset");

function increment() {
  let count = 0
  count++;
}

function decrement() {
  displayCount.textContent = count;
  if (count !== 0) {
    count--;
  }
}

function reset() {
  displayCount.textContent = count;
  count = 0;
}

displayCount = incrementElement.addEventListener("click", increment);
decrementElement.addEventListener("click", decrement);
resetElement.addEventListener("click", reset);

I wrote the code above but when I click the buttons it goes forward before doing what it is supposed to do. For example, if the count is 4 and I click the decrement button, it goes to 5 before going back to 4 then 3, 2, 1, 0.


Solution

  • I hope this is useful for you :)

    <div>
            <div id="count">0</div>
            <button id="increment">increment</button>
            <button id="decrement">decrement</button>
            <button id="reset">Reset</button>
        </div>
        <script type="text/javascript">
            var count = 0;
            var displayCount = document.getElementById("count");
    
            var incrementElement = document.getElementById("increment");
            var decrementElement = document.getElementById("decrement");
            var resetElement = document.getElementById("reset");
    
            incrementElement.addEventListener('click',function () {
                if (count < "1") {
                    count++;
                    displayCount.innerHTML = count;
                } else {
                    count++;
                    displayCount.innerHTML = count;
                }   
            });
            decrementElement.addEventListener('click',function () {
                if (count != "0") {
                    count--;
                    displayCount.innerHTML = count;
                }   
            });
            resetElement.addEventListener('click',function () {
                displayCount.innerHTML = "0";   
            });
        </script>