How do I add a reset button in a counter?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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.

CodePudding user response：

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:
els(".num").forEach((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);
});

<div >
  <input type="number"  min=0 max=100 step=1 value=0>
  <button type="button" >&#x25B4;</button>
  <button type="button" >&#x25BE;</button>
  <button type="button" >&#x00D7;</button>
</div>

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

CodePudding user response：

Remove the let from let number = 0; in your reset

However delegation makes life easier and is recommended.

I fail to see why giving a BETTER solution is reason to vote down

window.addEventListener("DOMContentLoaded", () => { // page load
  const number = document.getElementById("number");
  document.getElementById("counter").addEventListener("click", e => {
    const tgt = e.target;
    if (!tgt.matches("button")) return; //not a button
    let num =  number.textContent;
    if (tgt.id === "decrement") num--;
    if (tgt.id === "increment") num  ;
    if (tgt.id === "reset") num = 0;
    number.textContent = num;
  })
})

<div id="counter">
  <button type="button" id="increment">Increment</button>
  <span id="number">0</span>
  <button type="button" id="decrement">Decrement</button>
  <button type="button" id="reset">Reset</button>
</div>