HTML中JS读取input值相加4.5+.525得到4.5.525的问题修复

从<input> DOM元素读取的value属性默认返回字符串类型，直接使用+运算符时会触发字符串拼接逻辑，而非数值加法。单独运行硬编码数字的加法代码时，变量本身是数值类型，所以运算结果正常。

<!-- Swinburnes直流并励电动机试验计算器界面 -->
<div class="motor-calculator">
  <label>线路电流 IL (A): <input type="number" id="ilInput" step="0.001" placeholder="输入如4.5"></label>
  <br><br>
  <label>并励绕组电流 Ish (A): <input type="number" id="ishInput" step="0.001" placeholder="输入如0.525"></label>
  <br><br>
  <button id="calcBtn">执行计算</button>
  <br><br>
  <p>计算结果: <span id="result"></span> A</p>
</div>

<script>
// 等待DOM完全加载后绑定事件，避免元素未渲染报错
document.addEventListener('DOMContentLoaded', function() {
  // 预获取页面元素引用，避免重复查询DOM
  const ilInput = document.getElementById('ilInput');
  const ishInput = document.getElementById('ishInput');
  const calcBtn = document.getElementById('calcBtn');
  const resultEl = document.getElementById('result');

  // 绑定计算触发事件
  calcBtn.addEventListener('click', function() {
    // 核心修复：将input返回的字符串显式转换为浮点型数值
    // trim() 用于移除输入前后的空白字符，避免转换失败
    const IL = parseFloat(ilInput.value.trim());
    const Ish = parseFloat(ishInput.value.trim());

    // 输入合法性校验，避免非数字输入导致NaN异常
    if(isNaN(IL) || isNaN(Ish)) {
      resultEl.textContent = '请输入合法数值';
      console.error('输入值非法，请检查输入');
      return;
    }

    // 执行数值加法运算
    const calcResult = IL + Ish;
    // 保留3位小数，匹配电机试验精度要求
    const formattedResult = calcResult.toFixed(3);

    // 输出结果到页面与控制台
    console.log('计算结果：', formattedResult);
    resultEl.textContent = formattedResult;
  })
})
</script>

• 所有从input读取的值做显式数值类型转换，可选转换方式包括parseFloat()、Number()、+变量前缀，parseFloat()更适配带小数的电机参数计算场景
• 配置input的type="number"属性，限制用户只能输入数值，从源头减少非法输入概率
• 增加输入合法性校验逻辑，避免空输入、非数字输入导致的计算异常

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