JavaScript实现多文本框求和时Sum结果无法正常显示问题求助

问题原因 #

• 循环边界错误：当前共有10个输入框，id范围为Text1到Text10，但代码中for循环判断条件为i <= 11，遍历到i=11时会尝试获取不存在的Text11元素，抛出JS错误后终止执行，后续写入结果的逻辑不会运行。
• 结果容器无匹配id：你调用document.getElementById("Sum: ")查找结果写入节点，但HTML中展示Sum的div没有设置对应id，找不到元素自然无法写入求和结果。
• 额外优化点：原代码中for循环的迭代变量i未声明，会默认成为全局变量，存在变量污染风险。

修复代码 #

修正后的JS逻辑 #

function Add() {
  var add_entries = 0;
  // 修正循环边界，仅遍历10个有效输入框，同时声明迭代变量
  for (let i = 1; i <= 10; i++) {
    var textentry = "Text" + i;
    var x = Number(document.getElementById(textentry).value);
    add_entries += x;
  }
  console.log(add_entries);
  // 写入结果到指定节点
  document.getElementById("sumResult").textContent = add_entries;
}

修正后的HTML结果展示部分 #

只需要修改Sum对应的div，其余代码保持不变即可：

<!-- 给数值展示位加个带id的span，不会修改原有文字格式 -->
<div>Sum: <span id="sumResult"></span></div>
<div>Average: </div>
<div>Highest: </div>
<div>Lowest: </div>

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