JS deposit函数更新innerHTML后内容自动还原问题求助

• 核心原因是<button>放在<form>标签内部，浏览器默认将表单内未声明type属性的按钮识别为提交按钮，点击后会触发表单默认提交行为，导致页面重载。页面刷新后所有JS运行状态重置，bal变量回到初始值100，DOM也还原为初始渲染结果，所以会看到更新后的内容很快被覆盖。
• 代码还存在额外逻辑错误：deposit()函数内连续两次执行了bal += moneygiven，会导致最终余额比实际存入金额多算一倍。

你可以任选以下一种方法解决表单提交刷新的问题，同时修正重复累加的逻辑错误：

方法1：修改按钮类型避免默认提交 #

给<button>标签显式添加type="button"属性，让浏览器不再将其识别为表单提交按钮：

<button type="button" onclick="deposit()" value="" id="btnDeposit">Deposit</button>

方法2：阻止表单提交事件的默认行为 #

修改deposit()函数，接收点击事件参数并调用preventDefault()取消默认提交逻辑：
首先修改HTML的触发逻辑：

<button onclick="deposit(event)" value="" id="btnDeposit">Deposit</button>

再修改JS函数：

function deposit(e) {
  // 阻止表单默认提交
  e.preventDefault()
  var moneygiven = parseInt(document.getElementById("balance").value);
  if (moneygiven > 0) {
    // 已删除原代码中重复的累加逻辑
    bal += moneygiven
    currentBalance.innerHTML = "Current balance: " + bal + " Pesos"
  } else {
    alert("Error")
  }
}

修正完上述问题后，点击存款按钮就不会触发页面刷新，余额修改结果也会正常保留。

内容的提问来源于stack exchange，提问作者user17316586