Estoy trabajando en un proyecto y estoy un poco atascado. Estoy seguro de que me falta algo, pero no tengo exactamente lo que me falta.
Extraje el concepto general de lo que estoy haciendo y lo puse en un violín JS.
Básicamente, quiero disminuir el número mostrado (200) por un número generado aleatoriamente entre un rango de números específico cada vez que se hace clic en el botón (usando Vanilla JS). Conseguí que funcionara un poco. Cuando se hace clic en el botón, disminuye.
Sin embargo, quiero continuar disminuyéndolo hasta que el número que se muestra sea 0. Sin embargo, el problema con el que me encuentro es que cada vez que se hace clic en el botón, el número que se muestra se actualiza pero aún se resta de 200, no del valor actualizado.
Por ejemplo, puedo hacer clic una vez y el número saltará de 200 a 189. Cuando vuelva a hacer clic, el número en realidad saltará a 195, lo que significa que se resta de 200 en lugar de restar la nueva cantidad generada de 189.
Jsfiddle: https://jsfiddle.net/miguerurso/0wmtgd67/5/
html:
<head></head> <body> <div id="number" style="font-size: 2em;"></div> <button>decrement</button> </body>JS:
const numberCont = document.getElementById('number'); const button = document.querySelector('button'); let x = 200; numberCont.innerHTML = x; button.addEventListener("click", function(){ function randomNum(min, max) { return Math.floor(Math.random() * (max - min + 1) + min) } const randomNumResult = randomNum(7, 12) let updatedX = x - randomNumResult; numberCont.innerHTML = updatedX; })También debe asignar la updateX X a x. Actualmente solo lo estás dando al elemento. Prueba esto.
const numberCont = document.getElementById('number'); const button = document.querySelector('button'); let x = 200; numberCont.innerHTML = x; button.addEventListener("click", function(){ function randomNum(min, max) { return Math.floor(Math.random() * (max - min + 1) + min) } const randomNumResult = randomNum(7, 12) x = Math.floor(0, x - randomNumResult); numberCont.innerHTML = x; }En realidad, no estás cambiando el valor de x al nuevo valor sustraído. Tendrás que hacer esto para seguir restando de la variable. Reescribí su detector de eventos para cambiar el valor de x sin ir por debajo de 0.
button.addEventListener("click", function(){ function randomNum(min, max) { return Math.floor(Math.random() * (max - min + 1) + min) } x = Math.max(x - randomNum(7, 12), 0); numberCont.innerHTML = x; })Solo cambia una línea de código:
let updatedX = x - randomNumResult; numberCont.innerHTML = updatedX;con:
x = x - randomNumResult; numberCont.innerHTML = x;