Hice un sistema de monedas simple con JavaScript. Y para hacer actualizaciones, hice un botón que se habilita cuando tiene más de 10. Para hacer esto permanentemente, ejecuto esta función cada milisegundo con esto:
window.setInterval(function(){ // My code is here }, 1);De todos modos, ¿hay una forma más limpia de ejecutar este sistema sin ejecutar la función cada milisegundo? Parece que este no es un código limpio
Aquí está el código que hice para Coin-System-Thing:
var numberCounter = 0; var number = document.getElementById("number"); function plusOne() { numberCounter++; number.innerHTML = numberCounter; } function minusOne() { numberCounter--; number.innerHTML = numberCounter; } /* Disable Buttons when below 10 */ window.setInterval(function(){ if(number.innerHTML <=9){ document.getElementById("enableMe").disabled = true; } else { document.getElementById("enableMe").disabled = false; } }, 1); <button onclick="plusOne();">+1</button> <button onclick="minusOne();">-1</button> <p id="number">0</p> <button id="enableMe">Enabled when 10 or over</button>¡Gracias por adelantado!
Simplemente haga una función de actualización al hacer clic. No es necesario ejecutar continuamente una función mil veces por segundo. También comience con su botón deshabilitado (ya que el contador comienza en 0).
var numberCounter = 0; var number = document.getElementById("number"); function plusOne() { numberCounter++; number.innerHTML = numberCounter; updateButton(); } function minusOne() { numberCounter--; number.innerHTML = numberCounter; updateButton(); } function updateButton() { enableMe.disabled = (+number.innerHTML < 10) } <button onclick="plusOne();">+1</button> <button onclick="minusOne();">-1</button> <p id="number">0</p> <button id="enableMe" disabled>Enabled when 10 or over</button>En realidad, al optimizar un poco, ¡incluso puede ser una sola línea!
const change = amount => enableMe.disabled = (number.innerHTML = +number.innerHTML + amount) < 10; <button onclick="change(1)">+1</button> <button onclick="change(-1)">-1</button> <p id="number">0</p> <button id="enableMe" disabled>Enabled when 10 or over</button>1) Simplemente cree una función enableButton como se muestra a continuación y llámela después de hacer clic en los botones +1 y -1
function enableButton() { if (number.innerHTML <= 9) { document.getElementById("enableMe").disabled = true; } else { document.getElementById("enableMe").disabled = false; } };o
function enableButton() { document.getElementById("enableMe").disabled = number.innerHTML <= 9; }; 2) También debe manejar el caso por primera vez antes de presionar cualquier botón, luego simplemente llame a la función enableButton .
var numberCounter = 0; var number = document.getElementById("number"); function plusOne() { numberCounter++; number.innerHTML = numberCounter; enableButton() } function minusOne() { numberCounter--; number.innerHTML = numberCounter; enableButton() } enableButton(); function enableButton() { if (number.innerHTML <= 9) { document.getElementById("enableMe").disabled = true; } else { document.getElementById("enableMe").disabled = false; } }; <button onclick="plusOne();">+1</button> <button onclick="minusOne();">-1</button> <p id="number">0</p> <button id="enableMe">Enabled when 10 or over</button>