如何用JavaScript清除多用户输入？代码功能修复求助

问题根源分析 #

你的代码里Reset按钮功能失效主要有以下几个原因：

• emptyInput函数中引用的x、y、z、n、output2、output3都是局部变量，全局作用域无法访问
• 错误操作了不存在的outputKVA元素，且输出元素应该修改innerHTML而非value
• getAverage函数中引用的capacity是doCalc内的局部变量，会导致计算报错
• 计算按钮重复绑定了两个点击事件，可能引发逻辑冲突

修复后的完整代码 #

<div class="DTRloading__form" style="display: block;">
  <div class="form-container">
    <div class="info"></div>
    <form class="form-inline">
      <div class="form-group w-5 ">
        <label for="red">Red Phase:</label>
        <input type="number" class="form-control formInline" id="red" style="width: 80px">
      </div>
      <div class="form-group">
        <label for="yellow">Yellow Phase:</label>
        <input type="number" class="form-control formInline" id="yellow" style="width: 80px">
      </div>
      <div class="form-group">
        <label for="blue">Blue Phase:</label>
        <input type="number" class="form-control formInline" id="blue" style="width: 80px">
      </div>
      <div class="form-group">
        <label for="neutral">Neutral:</label>
        <input type="number" class="form-control formInline" id="neutral" style="width: 80px">
      </div>
    </form>
    <label for="inputKVA" class="sr-only">DTR CAPACITY(Amp)</label>
    <input type="number" id="inputKVA" class="form-control load" placeholder="DTR CAPACITY (KVA) *" required>
    <button id="btnStart3" style="margin-top: 8px" class="btn btn2 btn-lg btn-primary btn-block ">Calculate</button>
  </div>
  <div class="output">
    <h5 class="b-display">DTR Full Load Current is:</h5> 
    <div id="flA" class="form-control bill"></div>
    <h5 class="b-display">The percentage Loading of this DTR is:</h5>
    <div id="outputLoading" class="form-control bill"></div>
    <button id="btnRefresh3" class="btn btn2 btn-lg btn-primary btn-block">Reset</button>
  </div>
</div>

<script>
  // 全局获取需要操作的元素，避免重复查询
  const redInput = document.getElementById("red");
  const yellowInput = document.getElementById("yellow");
  const blueInput = document.getElementById("blue");
  const neutralInput = document.getElementById("neutral");
  const capacityInput = document.getElementById("inputKVA");
  const flAOutput = document.getElementById("flA");
  const loadingOutput = document.getElementById("outputLoading");
  const calcBtn = document.getElementById("btnStart3");
  const resetBtn = document.getElementById("btnRefresh3");

  // 绑定计算按钮事件（只绑定一次）
  calcBtn.addEventListener('click', handleCalculate);

  function handleCalculate(e) {
    e.preventDefault();
    // 获取输入值
    const x = parseFloat(redInput.value);
    const y = parseFloat(yellowInput.value);
    const z = parseFloat(blueInput.value);
    const n = parseFloat(neutralInput.value);
    const capacity = parseFloat(capacityInput.value);

    // 计算满载电流
    const totalfLA = (capacity * 1000) / (1.7321 * 415);
    flAOutput.innerHTML = totalfLA.toFixed(1) + "A";

    // 计算负载百分比
    if (!isNaN(x) && !isNaN(y) && !isNaN(z) && !isNaN(n) && !isNaN(capacity)) {
      const average = (((x + y + z + n) / 3) / (capacity * 1.391)) * 100;
      loadingOutput.innerHTML = average.toFixed(0) + "%";
    }
  }

  // 修复后的Reset函数
  function emptyInput(e) {
    e.preventDefault();
    // 清空所有输入框
    redInput.value = "";
    yellowInput.value = "";
    blueInput.value = "";
    neutralInput.value = "";
    capacityInput.value = "";
    // 清空所有输出结果
    flAOutput.innerHTML = "";
    loadingOutput.innerHTML = "";
  }

  // 绑定Reset按钮事件
  resetBtn.addEventListener("click", emptyInput);
</script>

关键修改说明 #

1. 全局元素引用：提前在全局获取所有需要操作的DOM元素，避免重复查询，同时解决局部变量无法访问的问题
2. 合并计算逻辑：把doCalc和calculate函数合并为handleCalculate，避免重复绑定事件导致的冲突
3. 修正Reset函数：直接通过全局元素引用清空输入框的value和输出元素的innerHTML，移除对不存在元素的操作
4. 增加数值校验：在计算负载百分比时判断输入是否为有效数字，避免NaN报错
5. 阻止默认行为：为计算和Reset按钮添加e.preventDefault()，防止意外的表单提交或页面跳转

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