如何使用数组简化多个getElementById的innerHTML批量赋值操作

你写的尝试代码存在的问题： #

• 变量声明顺序错误：for循环写在了myArray、outArray的定义之前，循环执行时这两个数组还未定义，会直接抛出引用错误。
• for循环缺失花括号：默认情况下for循环只会执行紧随其后的第一行代码，后续的赋值逻辑不会进入循环执行，仅能执行一次。
• 字符串误用：getElementById("myArray[i]")里给myArray[i]加了引号，相当于要查找id为字符串myArray[i]的元素，而不是取数组下标i对应的值，完全匹配不到目标元素。
• 变量和字符串混淆+大小写错误：outArray里你存的是"PLGame"这类字符串，不是你要的PLGame变量的值；同时使用数组时把小写开头的outArray写成了大写开头的OutArray，JS是大小写敏感的，会直接报变量未定义错误。

正确实现方案 #

方案1：用对象映射（更推荐，不容易出现两个数组下标不匹配的问题）

把元素id和要赋值的变量一一对应存在对象里，遍历对象赋值即可：

// key是元素id，value是要赋值的变量
const renderMap = {
  PLG: PLGame,
  PLV: PLV,
  PLKOT: PLKOT,
  PLS1: PLS1,
  PLS2: PLS2,
  PLS3: PLS3,
  PLPred: PLPred
}
// 遍历对象完成赋值
for (const id in renderMap) {
  document.getElementById(id).innerHTML = renderMap[id]
}

方案2：修正你原来的数组思路

如果要沿用你最初的数组实现，调整后代码如下：

// 先定义两个数组，注意第二个数组存的是变量，不要加引号
const idArray = ["PLG","PLV","PLKOT","PLS1","PLS2","PLS3","PLPred"];
const valueArray = [PLGame, PLV, PLKOT, PLS1, PLS2, PLS3, PLPred];
// 循环写在数组定义之后，加上花括号包裹逻辑，参数不要加多余引号
for (let i = 0; i < idArray.length; i++) {
  document.getElementById(idArray[i]).innerHTML = valueArray[i];
}

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