JavaScript将输入数字存入数组求和出现undefined报错如何解决

你代码的问题点 #

• document.getElementsByClassName返回的是类数组的HTML集合，不是单个元素，直接取.value必然返回undefined，需要通过下标[索引]才能取到对应位置的DOM元素
• 你在生成输入框的循环里立刻取值，此时用户还没有输入任何内容，拿到的只能是空值或undefined，取值求和的逻辑应该放在用户输入完成后的触发事件（比如按钮点击）里执行
• 你拼接的input标签没有闭合，缺少结尾的>，会导致页面DOM解析异常
• 所有name输入框用了相同的idmarkname，id在页面中必须唯一，重复id会导致元素选择异常

修正后的实现代码 #

var myHTML = '';
let numa = [];
// 第一步：先生成所有输入框DOM
for (var i = 0; i < input; i++) {
  // 修正标签闭合问题，id加索引保证唯一
  myHTML += `<span class="test">Mark #${i+1} Name: </span>
  <input type="text" id="markname_${i}" /><br/>
  <span class="markn">Mark: </span>
  <input type="text" class="marknum" /><br/><br/>`;
}
// 循环结束后一次性插入DOM，减少页面重绘
wrapper.innerHTML = myHTML;
// 新增求和按钮触发计算
wrapper.innerHTML += `<button id="calcSum">计算总和</button>`;

// 求和逻辑，点击按钮时执行
document.getElementById('calcSum').addEventListener('click', function() {
  let sum = 0;
  const markInputs = document.getElementsByClassName('marknum');
  numa = [];
  // 遍历所有分数输入框取值
  for (let j = 0; j < markInputs.length; j++) {
    // 把输入值转成数字，非数字输入默认按0处理
    const num = Number(markInputs[j].value) || 0;
    numa.push(num);
    sum += num;
  }
  console.log('数组内容：', numa);
  console.log('总和：', sum);
})

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