reset button that won't reset properly in JS

user_19381651 0
Viewed 24

I've created 3 buttons, when you push one of them, indicates how many times you have clicked on that button.

I succeeded in making the button work properly. But the reset button I made is broken, which is the issue.

when you click the rest button it's going to '0' but after starting the button press again counting starts from '2' or '3', not from the number '1'.

please help me to sort this matter.

let btns=document.querySelectorAll('.box');
let reset=document.getElementById('rest');


    btns.forEach(btn => {   
        btn.addEventListener('click', () => {
                btn.innerText= ++ btn.value;
        });
});


reset.addEventListener('click', ()=>{
        btns.forEach(btn => {
                btn.innerText= 0;
        });     
       
});
button{
    height: 100px;
    width: 100px;
}
<button class="box" value="0">0</button>
    <button class="box" value="0">0</button>
    <button class="box" value="0">0</button>

    <button id="rest">Reset</button>

html javascript
2 Answers

get the innerText and then add 1 to it per click.

  1. You're getting the value of the button, but are never setting it

  2. You're not parsing the value as an int. You can't use ++ or calculating functions on strings, but getting a value or text from an element always returns a string type, not an integer.

let btns=document.querySelectorAll('.box');
let reset=document.getElementById('rest');


    btns.forEach(btn => {   
        btn.addEventListener('click', () => {
                btn.innerText= parseInt(btn.innerText) + 1;
        });
});


reset.addEventListener('click', ()=>{
        btns.forEach(btn => {
                btn.innerText= 0;
        });     
       
});

Thanks to NoobishPro

user_66518400

You are setting the btn text to 0 when reset. You also have to set the button value to 0. Which you are incrementing. As result when you reset only text is changed, value reamains the same.

let btns = document.querySelectorAll('.box')
let reset = document.getElementById('rest')

btns.forEach(btn => {   
  btn.addEventListener('click', () => {
    btn.innerText = parseInt(btn.innerText) + 1
  })
})


reset.addEventListener('click', () => {
  btns.forEach(btn => {
    btn.innerText = 0
    btn.value = 0
  })
})
user_115120060
Related