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)}`;
}
You could assign the new credit to the input element's value (making the balance output a bit unnecessary). Replace this:
document.getElementById("balance").innerText = `Balance: £ ${(credit -=
bet)}`;
With:
credit -= bet;
document.getElementById("inputCredit").value = credit;
document.getElementById("balance").innerText = `Balance: £ ${credit}`;
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>