CODEWITHSUNDEEP
javascript
Gab
Gab

Reputation: 21

How do I add a reset button in a counter?

There are three buttons which the user can click to increment, decrement, or reset the number (which is 0 at default). I attempted to make a reset button that seemed to work because the number was set to 0, but if I clicked the increment or decrement button, it adds/subtracts and displays the number before it was reset.

   let number = 0;
   function increment() {
       number++;
       document.getElementById("number").innerHTML = number;
   }
   function decrement() {
       number--;
       document.getElementById("number").innerHTML = number;
   }
   function reset() {
       let number = 0;
       document.getElementById("number").innerHTML = number;
   }
<span id="number"></span>
<button id="increment" onclick="increment()">Increment</button>
<button id="decrement" onclick="decrement()">Decrement</button>
<button id="reset" onclick="reset()">Reset</button>

Upvotes: 1

Views: 2404

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206593

Besides the let typo in your code

  • Don't use IDs. Code should be reusable. Create a more flexible code for the sake of DRY. The below example can be used on any number of such UI elements. Just wrap them inside a common parent element and use Class
  • Don't use unsafe inline on* handlers attributes. JS should be in one place only. Use addEventListener() instead.
  • Use type="button" on button elements that are willingly not of type Submit (default)
  • Instead of a <span> use an <input type="number"> element, and eventually add the readonly attribute.
  • Use the Input's JS stepUp() and stepDown() native methods

// DOM utility functions:

const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);


// Number inputs with arrows:

const initInputArrows = (elNum) => {
  const elUp = el(".num-up", elNum);
  const elDn = el(".num-down", elNum);
  const elRs = el(".num-reset", elNum);
  const elIn = el(".num-input", elNum);
  elDn.addEventListener("pointerdown", () => elIn.stepDown());
  elUp.addEventListener("pointerdown", () => elIn.stepUp());
  elRs.addEventListener("pointerdown", () => elIn.value = 0);
};

els(".num").forEach(initInputArrows);
<div class="num">
  <input type="number" class="num-input" min=0 max=100 step=1 value=0>
  <button type="button" class="num-up">&#x25B4;</button>
  <button type="button" class="num-down">&#x25BE;</button>
  <button type="button" class="num-reset">&#x00D7;</button>
</div>

<div class="num">
  <input type="number" class="num-input" min=0 max=100 step=0.5 value=5.5>
  <button type="button" class="num-up">&#x25B4;</button>
  <button type="button" class="num-down">&#x25BE;</button>
  <button type="button" class="num-reset">&#x00D7;</button>
</div>

Upvotes: -1

Jasper
Jasper

Reputation: 630

By adding let inside your function you are creating another (local) variable called number instead of changing the already existing, global variable. Just leave it out to access the original variable:

function reset() {
    number = 0;
    document.getElementById("number").innerHTML = number;
}

As a side note: javascript already has a function called Number, so it is best to not use such a similar name for your variable, like count, or something a bit more descriptive like amount_of_something.

Upvotes: 3

Evren
Evren

Reputation: 4410

Inside reset change let number = 0; with number = 0;

  <button id="increment" onclick="increment()">Increment</button>
    <button id="decrement" onclick="decrement()">Decrement</button>
    <button id="reset" onclick="reset()">Reset</button>
    <p id='number'></p>

    <script>
    let number = 0;
    function increment() {
        number++;
        document.getElementById("number").innerHTML = number;
    }
    function decrement() {
        number--;
        document.getElementById("number").innerHTML = number;
    }
    function reset() {
        number = 0;
        document.getElementById("number").innerHTML = number;
    }
    </script>

Upvotes: 4

Related Questions