Question

0

152

Views

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>

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-30T18:33:11.855Z

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>

Answer 2 · 2022-06-30T18:33:11.864Z

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.

Answer 3 · 2022-06-30T18:33:11.872Z

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>

0

152

How do I add a reset button in a counter?

3 answers

0

0

0

Find remote jobs

Andres GPT