Keep subtracting from an input value

August 8, 2022

I am creating a bet system and I want to subtract a bet from an input value every time the user click a button, but It does it just once. I know why it does it (It always takes the first value) but no idea how to sort it.
I´ve stored the value into another variable and changed it to a Number.

What I´ve tried so far.

    let btnCredit = document.getElementById("btn-credit");
btnCredit.addEventListener("click", balance);
    <div class="inputs">
            <input
              type="number"
              id="inputCredit"
              placeholder="Insert your credit"
            />
            <button id="btn-credit" class="btn-credit" >Submit credit</button>
            <fieldset>
              <legend class="legend">Select a bet:</legend>
              <input type="radio" name="bet" id="10" value="10" />
              <label>£10</label>
              <input type="radio" name="bet" id="50" value="50" />
              <label>£50</label>
              <input type="radio" name="bet" id="100" value="100" />
              <label>£100</label>
            </fieldset>
            <p id="balance">Balance: £</p>
          </div>
    
    
    function balance() {
      let inputCredit = document.getElementById("inputCredit").value;
      let credit = Number(inputCredit);
    
      
      let bet;
      if (document.getElementById("10").checked) {
        bet = Number(document.getElementById("10").value);
      } else if (document.getElementById("50").checked) {
        bet = Number(document.getElementById("50").value);
      } else {
        bet = Number(document.getElementById("100").value);
      }
    
      document.getElementById("balance").innerText = `Balance: £ ${(credit -=
        bet)}`;
    
    }

>Solution :

It’s because you’re resetting the credit variable every time button is clicked.

You can add a global variable to store that (let credit outside your function).

In your function if the variable is set use it’s value, else set it to the input value (?? operator) .

let credit

function balance() {
  let inputCredit = document.getElementById("inputCredit").value;
  credit = credit ?? Number(inputCredit);

  
  let bet;
  if (document.getElementById("10").checked) {
    bet = Number(document.getElementById("10").value);
  } else if (document.getElementById("50").checked) {
    bet = Number(document.getElementById("50").value);
  } else {
    bet = Number(document.getElementById("100").value);
  }

  document.getElementById("balance").innerText = `Balance: £ ${(credit -=
    bet)}`;

}

<div class="inputs">
  <input
    type="number"
    id="inputCredit"
    placeholder="Insert your credit"
  />
  <button id="btn-credit" class="btn-credit" onclick="balance()">Submit credit</button>
  <fieldset>
    <legend class="legend">Select a bet:</legend>
    <input type="radio" name="bet" id="10" value="10" />
    <label>£10</label>
    <input type="radio" name="bet" id="50" value="50" />
    <label>£50</label>
    <input type="radio" name="bet" id="100" value="100" />
    <label>£100</label>
  </fieldset>
  <p id="balance">Balance: £</p>
</div>