How to display the increasing data?

December 31, 2021

In the following code, if one clicks the "increase" button, the number will go up by 0.1 per second. If one clicks the button again, it will go up by 0.2 per second, and it goes on and on. I would like to display the increasing rate (+…/s) on the screen, how do I do this?

Here is the fiddle

let num = document.getElementById("num");
let btn = document.getElementById("btn");
let Increment = 0;

function toIncrease() {
  Increment += .1;

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

btn.addEventListener("click", toIncrease)

<span id="num">0</span> <br>
<span id="incSpeed">(+0/s)</span>
<button id="btn">
increase
</button>

>Solution :

I have added 2 lines to your code,

let num = document.getElementById("num");
let incspeed = document.getElementById("incSpeed");
let btn = document.getElementById("btn");
let Increment = 0;

function toIncrease (){
   Increment += .1;
   incspeed.innerHTML = `(+${Increment}/s)`;

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

btn.addEventListener("click",toIncrease)

Hopefully this helps!