Aunque la función deposit() actualiza el HTML interno, desafortunadamente, devuelve la variable constante de bal .
var bal = 100; var currentBalance = document.getElementById("REPLACED") currentBalance.innerHTML = "Current balance: " + bal + " Pesos" function deposit() { var moneygiven = parseInt(document.getElementById("balance").value); bal += moneygiven if (moneygiven > 0) { bal += moneygiven var output = "Current balance: " + bal + " Pesos"; // Display result currentBalance.innerHTML = "Current balance: " + bal + " Pesos" } else { alert("Error") } } <div> <p>Code</p> <h1 id="REPLACED"></h1> <form> <input type="number" placeholder="00000" id="balance" name="balanceNumber" /> <button onclick="deposit()" value="" id="btnDeposit">Deposit</button> </form> </div>El type predeterminado para el button es submit .
No desea que su button envíe su formulario cuando se hace clic, así que cámbielo a type="button" .
var bal = 100; var currentBalance = document.getElementById("REPLACED") currentBalance.innerHTML = "Current balance: " + bal + " Pesos" function deposit() { var moneygiven = parseInt(document.getElementById("balance").value); // bal += moneygiven // not sure if you really want this line of code twice in case of moneygiven > 0 if (moneygiven > 0) { bal += moneygiven var output = "Current balance: " + bal + " Pesos"; // Display result currentBalance.textContent = "Current balance: " + bal + " Pesos" } else { alert("Error") } } <div> <p>Code</p> <h1 id="REPLACED"></h1> <form> <input type="number" placeholder="00000" id="balance" name="balanceNumber" /> <button onclick="deposit()" value="" id="btnDeposit" type="button">Deposit</button> </form> </div> Además, no hay necesidad de trabajar con la propiedad insegura innerHTML aquí; use textContent siempre que no necesite inyectar HTML.