How to display the increasing data?-CodePudding

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>

CodePudding user response：

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!

CodePudding user response：

You need to not keep setting intervals

Also your parseFloat(parseInt((parseFloat(num.innerHTML) .05 Increment) * 10) / 10); is unnecessary

const num = document.getElementById("num");
const btn = document.getElementById("btn");
const incSpeedSpan = document.getElementById('incSpeed')
let incSpeed = 0
let tId;
function toIncrease() {
  incSpeed  = .1
  if (!tId) {
    tId = setInterval(() => {
      num.innerHTML = ( num.innerHTML   incSpeed).toFixed(1)
    }, 1000)
  }
  incSpeedSpan.innerHTML = `( ${incSpeed}/s)`
}

btn.addEventListener("click", toIncrease)

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

CodePudding user response：

This should works.

 let num = document.getElementById("num");
let btn = document.getElementById("btn");
let Increment = 0;
let speed= document.getElementById('incSpeed')
function toIncrease() {
  Increment  = .1;
  if(Increment == 0.1){
  setInterval(() => {
        speed.innerHTML = '( ' Increment.toFixed(1) '/s)'
      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>