En el siguiente código, si uno hace clic en el botón "aumentar", el número aumentará en 0,1 por segundo. Si uno vuelve a hacer clic en el botón, aumentará 0,2 por segundo y seguirá y seguirá. Me gustaría mostrar la tasa creciente (+.../s) en la pantalla, ¿cómo hago esto?
Aquí está el violín
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>Para actualizar el texto usé literales de plantilla
incSpeedSpan.innerHTML = `(+${incSpeed}/s)` El parseFloat(parseInt((parseFloat(num.innerHTML) + .05 + Increment) * 10) / 10); es innecesario
También configuré una variable para mantener el valor de retorno de setInterval para que pueda borrar Interval si es necesario
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>He añadido 2 líneas a tu código,
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>¡Ojalá esto ayude!
Esto debería funcionar.
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>