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>To update the text I used template literals
incSpeedSpan.innerHTML = `(+${incSpeed}/s)`
The parseFloat(parseInt((parseFloat(num.innerHTML) + .05 + Increment) * 10) / 10); is unnecessary
I also set a variable to hold the setInterval return value so you can clearInterval if needed
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); // make sure to round the decimals
}, 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>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)<span id="num">0</span> <br>
<span id="incSpeed">(+0/s)</span>
<button id="btn">
increase
</button>Hopefully this helps!
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>