I made a simple Coin System with JavaScript. And to make Upgrades, I made a button that gets enabled when it's over 10. To make this permanently I run this function every millisecond with this:

window.setInterval(function(){
  // My code is here
}, 1);

Anyway, is there a cleaner way to run this system without running the function every millisecond? It looks like this isn't clean code

Here is the code I made for the 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Thanks in advance!

CodePudding user response：

Simply make an update function on click. No need to continuously run a function a thousand times per second. Also start with your button disabled (since the counter starts at 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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Actually, by optimizing a little, it can even be a one-liner!

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

1) Just create a function enableButton as below and call it after the click of both 1 and -1 button

function enableButton() {
  if (number.innerHTML <= 9) {
    document.getElementById("enableMe").disabled = true;
  } else {
    document.getElementById("enableMe").disabled = false;
  }
};

or

function enableButton() {
  document.getElementById("enableMe").disabled = number.innerHTML <= 9;
};

2) You also have to handle the case for the first time before any botton press then you just call the enableButton function.

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>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>