javascript - JS根据其他输入值自动计算输入字段不起作用

Question

请帮助我找出计算不起作用的原因。我的控制台日志没有显示任何错误。

我希望第三个禁用输入只显示前两个输入的添加。请在下面查看我的代码。有什么我没有包括或添加的吗？

var yearlyMB = document.getElementById('yearlyMB').value;
var yearlyDB = document.getElementById('yearlyDB').value;

document.getElementById('totalBudget').value = yearlyMB + yearlyDB;

.container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  /*margin-top: 200px;*/
}

.block-title {
  border: 2px solid green;
  background-color: gray;
  width: 300px;
  height: 50px;
  text-align: center;
}

.block-answer {
  border: 2px solid red;
  background-color: yellow;
  width: 300px;
  height: 50px;
}

<div class="container">
  <div class="block-title">Yearly Marketing Budget</div>
  <input type="text" class="block-answer" id="yearlyMB">
</div>

<div class="container">
  <div class="block-title">Yearly Donation Budget</div>
  <input type="text" class="block-answer" id="yearlyDB">
</div>

<div class="container">
  <div class="block-title">Total Budget</div>
  <input type="text" readonly="readonly" disabled="disabled" class="block-answer" id="totalBudget">
</div>

标签： javascript

Answer 1

您拥有大部分元素，但您的代码当前仅在页面首次加载时运行一次。

为了不断更新“总计”输入中的值，您需要在输入中添加侦听器以观察变化。请参阅：addEventListener()和输入事件

您还需要考虑输入值始终是字符串这一事实，下面的代码片段使用一元加号 (+)运算符将输入值转换为数字，然后再将它们相加。如果您不这样做，您将简单地连接两个字符串。

const yearlyMB = document.getElementById('yearlyMB');
const yearlyDB = document.getElementById('yearlyDB');
const totalBudget = document.getElementById('totalBudget');

function updateTotalBudget() {
  totalBudget.value = +yearlyMB.value + +yearlyDB.value;
}

[yearlyMB, yearlyDB].forEach(input =>
  input.addEventListener('input', updateTotalBudget));

.container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  /*margin-top: 200px;*/
}

.block-title {
  border: 2px solid green;
  background-color: gray;
  width: 300px;
  height: 50px;
  text-align: center;
}

.block-answer {
  border: 2px solid red;
  background-color: yellow;
  width: 300px;
  height: 50px;
}

<div class="container">
  <div class="block-title">Yearly Marketing Budget</div>
  <input type="text" class="block-answer" id="yearlyMB">
</div>

<div class="container">
  <div class="block-title">Yearly Donation Budget</div>
  <input type="text" class="block-answer" id="yearlyDB">
</div>

<div class="container">
  <div class="block-title">Total Budget</div>
  <input type="text" readonly="readonly" disabled="disabled" class="block-answer" id="totalBudget">
</div>