如何用JavaScript通过两个输入框值动态更新第三个禁用输入框的值？

你的代码存在三个核心问题，导致无法实现预期效果：

1. 变量名不匹配
   你定义了time_in_min和time_in_sec变量，但计算时误用了未声明的min和sec，这会导致计算结果为NaN，最终赋值给禁用输入框时会显示0。

2. 缺少事件监听
   代码仅在DOM加载完成时执行一次计算，没有监听前两个输入框的输入变化，所以修改输入值后不会触发更新。

3. HTML结构不完整
   你只提供了第三个输入框的HTML，前两个输入框的结构缺失，需要补充完整才能正常获取值。

完整修复代码 #

HTML部分（补充前两个输入框） #

<div class="in">
  <input id="length_min" name="length_min" type="number" min="0" class="validate" placeholder="分钟"/>
  <label for="length_min">Time in minutes</label>
</div>
<div class="in">
  <input id="length_sec" name="length_sec" type="number" min="0" max="59" class="validate" placeholder="秒"/>
  <label for="length_sec">Time in seconds</label>
</div>
<div class="in">
  <input id="total_length_sec" name="total_length_sec" type="number" min="0" disabled="disabled" class="validate" />
  <label for="total_length_sec">Total time in seconds</label>
</div>

JavaScript部分（修复变量名+添加事件监听） #

document.addEventListener('DOMContentLoaded', function () {
  // 获取三个输入框元素
  const minInput = document.querySelector('#length_min');
  const secInput = document.querySelector('#length_sec');
  const totalInput = document.querySelector('#total_length_sec');

  // 定义计算函数
  function calculateTotal() {
    // 将输入值转为数字，空值或非数字时默认设为0
    const min = parseInt(minInput.value) || 0;
    const sec = parseInt(secInput.value) || 0;
    // 计算总秒数
    const total = min * 60 + sec;
    // 赋值给总秒数输入框
    totalInput.value = total;
  }

  // 初始加载时执行一次计算
  calculateTotal();

  // 给前两个输入框添加输入事件监听，实时更新结果
  minInput.addEventListener('input', calculateTotal);
  secInput.addEventListener('input', calculateTotal);
});

关键改进说明 #

• 统一变量名，避免未定义错误
• 添加input事件监听，确保前两个输入框的值变化时自动重新计算
• 对输入值做容错处理，空值或非数字输入时默认按0计算，避免出现NaN
• 补充完整的HTML结构，确保能正确获取前两个输入框的引用

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