如何继续添加到 JS 变量？

Question

每次用户在框中输入值时，我都会尝试不断添加到 js 变量中。

到目前为止，如果他们输入“21”，警报将显示“您的余额为 12 英镑”，但如果我输入“15”，我希望它说您的余额为“27”，但它会显示“15”或更确切地说只是最新的金额。

以下代码：

<form action="" method="get">
  <input type="number" value="" id="amountDropped">
  <input type="submit" value="Deposit amount" onclick="depositedFunds()">
</form>

var firstAmount = 0;    
function depositedFunds(){

    var ad = document.getElementById("amountDropped");

    firstAmount = +firstAmount + +ad.value;
    alert ("Your balance is £" + firstAmount);
};

谢谢

Answer 1

进行更改的函数附在提交按钮上。

当用户点击按钮时：

1. JS 运行
2. 值已更新
3. 值被提醒
4. 表单已提交
5. 新页面加载
6. 新页面中有var firstAmount = 0;

你应该：

• 使用服务器端代码动态设置默认值。见Unobtrusive JavaScript和
• 防止提交按钮的默认行为

使用 onclick 属性，您需要从事件处理函数中返回 false：

onclick="depositedFunds(); return false;"

现代代码将关注点分开，而不是将事物与触发表单提交的特定方式紧密联系在一起。

var firstAmount = 0;

function depositedFunds(e) {
  e.preventDefault();
  var ad = document.getElementById("amountDropped");
  firstAmount = +firstAmount + +ad.value;
  alert("Your balance is £" + firstAmount);
};

document.querySelector('form').addEventListener('submit', depositedFunds);

<form method="get">
  <input type="number" id="amountDropped">
  <input type="submit" value="Deposit amount">
</form>