Estoy creando un sistema de apuestas y quiero restar una apuesta de un valor de entrada cada vez que el usuario hace clic en un botón, pero lo hace solo una vez. Sé por qué lo hace (siempre toma el primer valor) pero no tengo idea de cómo ordenarlo. Guardé el valor en otra variable y lo cambié a un Número.
Lo que he probado hasta ahora.
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)}`; }Puede asignar el nuevo crédito al valor del elemento de input (haciendo que la salida del saldo sea un poco innecesaria). Reemplace esto:
document.getElementById("balance").innerText = `Balance: £ ${(credit -= bet)}`;Con:
credit -= bet; document.getElementById("inputCredit").value = credit; document.getElementById("balance").innerText = `Balance: £ ${credit}`;Es porque está restableciendo la variable de credit cada vez que se hace clic en el botón.
Puede agregar una variable global para almacenar eso ( let credit fuera de su función).
En su función, si la variable está configurada, use su valor, de lo contrario, configúrela en el valor de entrada (operador ?? ).
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>