如何用JavaScript自动将计算结果填充到HTML表单输入框？

你的代码存在几个关键问题导致无法自动显示计算结果，以下是修复步骤及完整代码：

1. 完善计算函数 #

原函数仅完成了数值计算，但未将结果赋值给目标输入框，同时需要处理未选择选项/未输入有效数字时的NaN异常：

function Calculate() {
  var f1 = document.getElementById("item");
  var field1 = parseInt(f1.options[f1.selectedIndex].value);
  var f2 = document.getElementById("level");
  var field2 = parseInt(f2.options[f2.selectedIndex].value);
  var f3 = document.getElementById("number");
  var field3 = parseInt(f3.value);
  var priceInput = document.getElementById("price");

  // 校验所有值为有效数字时才计算，避免显示NaN
  if (!isNaN(field1) && !isNaN(field2) && !isNaN(field3)) {
    var result = (field1 * field2 * field3) / 100;
    priceInput.value = result;
  } else {
    // 输入不完整时清空结果框
    priceInput.value = "";
  }
}

2. 修正结果输入框的无效属性 #

原HTML中price输入框的value="Calculate()"写法错误，value属性无法自动执行函数，改为只读空值：

<input type="number" id="price" name="price" form="qForm" readonly>

3. 添加自动触发事件 #

给三个输入/选择字段绑定事件，让用户操作时自动触发计算：

• 下拉选择框添加onchange="Calculate()"
• 数字输入框添加oninput="Calculate()"

修改后的完整HTML代码 #

<label for="item">Choose item:</label>
<select id="item" name="item" form="qForm" required onchange="Calculate()">
  <option value=""></option>
  <option value="250">item1</option>
  <option value="250">item2</option>
  <option value="300">item3</option>
</select>
</br>
<label for="level">Choose level:</label>
<select id="level" name="level" form="qForm" required onchange="Calculate()">
  <option value=""></option>
  <option value="100">lvl1</option>
  <option value="120">lvl2</option>
  <option value="140">lvl3</option>
</select>
</br>
<label for="number">Duration (hours):</label>
<input id="number" type="number" name="number" min="10" required oninput="Calculate()">
</br>
<label for="price">Preliminary price (EUR):</label>
<input type="number" id="price" name="price" form="qForm" readonly>

可选优化 #

• 给计算结果保留两位小数：将priceInput.value = result;改为priceInput.value = result.toFixed(2);
• 空选项设置value=""，让parseInt返回NaN，更准确判断未选择状态

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