Decimal number grow out of control when using setInterval function

Question

I would like to use setInterval to increase a number by 0.1/s, and I would also like to apply this function multiple times to the number (click once, +0.1/s, click twice, +0.2/s, etc). However, when I execute the function, the number would increase to something like 3.00000001 instead of 3, or 7.999999999 instead of 8. How do I fix this?

let btn = document.querySelector(".button");
let num = document.getElementById("number");
let increment = 0;

function toAdd() {
  setInterval(() => {
    num.innerHTML = parseFloat(num.innerHTML) + increment;
  }, 1000)
}

btn.addEventListener("click", toAdd, increment += 0.1);

<span id="number">0</span>
<button class="button">Click to Add</button>

Use [*toFixed*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed): `num.innerHTML = (+num.innerHTML + increment).toFixed(1);` — RobG, Dec 28 '21 at 23:07

score 1 · Accepted Answer · answered Dec 28 '21 at 23:12

every time you click you are setting a new setInterval. also toFixed() as suggested will work but you need to use an if statement to prevent multiple setIntervals

let btn = document.querySelector(".button");
let num = document.getElementById("number");
let increment = 0;
function toAdd() {
increment+=.1

if (increment == .1){
  setInterval(() => {
    num.innerHTML =parseFloat(parseInt((parseFloat(num.innerHTML)+.05+increment)*10)/10);
    
    
  }, 1000)} else num.innerHTML =parseFloat(parseInt((parseFloat(num.innerHTML)+.05+increment)*10)/10);
}

btn.addEventListener("click", toAdd);

<span id="number">0</span>
<button class="button">
Click to Add
</button>

Decimal number grow out of control when using setInterval function

1 Answers1