JavaScript中ID正确赋值方法及循环获取input值报错解决

咱们一步步拆解你遇到的问题，这两个核心原因既是代码低效的根源，也是抛出错误的关键：

1. 字符串拼接逻辑出错 #

你的rs变量在循环里没有被重置，第一次循环后rs变成了idx1，第二次循环会在这个基础上直接加2，变成idx12——完全不是你想要的idx2！这就导致后续循环里getElementById根本找不到对应ID的元素，自然会抛出Cannot read property 'value' of null的错误。

2. 原生JS与jQuery方法混淆 #

document.getElementById()返回的是原生DOM元素对象，获取它的输入值应该用.value属性；而.val()是jQuery库专属的方法，只有用jQuery选择器（比如$("#idx1")）拿到的对象才能用这个方法。

修正后的最优代码 #

function chkit() {
  // 用let声明循环变量，避免全局污染
  for (let c = 1; c <= 20; c++) {
    // 每次循环重新生成正确的ID，模板字符串更直观
    const elementId = `idx${c}`;
    const inputElement = document.getElementById(elementId);
    
    // 先检查元素是否存在，提前规避null错误
    if (inputElement) {
      const inputValue = inputElement.value;
      // 这里可以根据需求处理值，比如存入数组或打印
      console.log(`idx${c}的输入值:`, inputValue);
    } else {
      console.warn(`未找到ID为${elementId}的输入元素`);
    }
  }
}

额外排查建议 #

如果修正后仍有null错误，那就要检查你的HTML结构了：

• 确认所有input的ID是严格的idx1、idx2……idx20，没有拼写错误（比如大小写混乱、多打了符号、数字错位）
• 确保调用chkit()函数时，页面上的input元素已经加载完成（比如把函数调用放在DOMContentLoaded事件里，或者放在body标签的末尾）

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