JavaScript中用getElementById批量获取input值存入数组的问题

嘿，我一眼就看出问题所在啦——你在获取元素ID的时候，没有正确把变量i的值拼接到字符串里，这才导致代码无法正常运行，和循环本身的逻辑关系不大～

你原来的代码里，document.getElementById('cell-[i]')是把[i]当成了字符串的固定部分，浏览器会去寻找ID是cell-[i]（而不是cell-0、cell-1...）的元素，自然找不到对应的输入框，也就没法存值到数组里了。

修正后的代码 #

这里给你两种简单的修正方式，都能解决问题：

方式1：传统字符串拼接

var test = [];
// 注意：81个元素需要循环81次（i从0到80），所以条件改成i < 81
for(let i = 0; i < 81; i++){
  test[i] = document.getElementById('cell-' + i).value;
}

方式2：ES6模板字符串（更直观）

如果你对ES6语法不陌生，模板字符串会让代码可读性更高：

const test = [];
for(let i = 0; i < 81; i++){
  test[i] = document.getElementById(`cell-${i}`).value;
}

额外小建议（新手友好） #

• 用let i代替直接写i，可以避免变量污染全局作用域，是个好习惯；
• 如果担心有些cell-[x]元素可能不存在（比如页面渲染出问题），可以加个判断防止报错：

const test = [];
for(let i = 0; i < 81; i++){
  const cellElement = document.getElementById(`cell-${i}`);
  test[i] = cellElement ? cellElement.value : ''; // 元素存在就取value，不存在设为空字符串
}

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