JavaScript统计有值input输入框数量累加异常问题求助

• 循环边界错误：你当前的循环判断条件为z <= fields.length，fields是类数组结构，索引从0开始，长度为3时合法索引只有0、1、2，当z等于3时访问fields[3]会得到undefined，读取value属性会抛出异常，导致代码运行逻辑异常。
• 计数器作用域问题：如果计数器count定义在点击事件处理函数的外部，每次触发点击事件时不会重置为0，就会出现上一次的计数结果被累加的问题。另外你当前的console.log放在了循环内部，每次遍历都会打印，也会干扰你对最终计数结果的判断。

将所有统计逻辑封装在点击事件处理函数内部，每次触发都会重新初始化计数器、重新统计：

// 点击事件处理函数
function countFilledInputs() {
  const fields = document.querySelectorAll('[id^=example-]');
  let count = 0;
  // 修正循环边界
  for (let z = 0; z < fields.length; z++) {
    // 加trim可以排除纯空格的输入情况，不需要可以去掉.trim()
    if (fields[z].value.trim() !== "") {
      count++;
    }
  }
  // 日志放到循环结束后打印，只输出最终统计结果
  console.log('count is: ' + count);
  return count;
}

// 绑定点击事件，替换成你实际绑定的元素选择器即可
document.querySelector('#你的按钮ID').addEventListener('click', countFilledInputs);

也可以用数组方法实现更简洁的写法：

function countFilledInputs() {
  const filledCount = Array.from(document.querySelectorAll('[id^=example-]'))
    .filter(input => input.value.trim() !== '').length;
  console.log('count is: ' + filledCount);
  return filledCount;
}

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