如何用循环为井字棋变量批量赋值对应DOM元素值？

现有代码的问题分析 #

你提供的这段代码存在几个关键问题：

var tiles = new Object(); tiles.assignTile = new function() { tiles.a1, a2, a3, b1, b2, b3, c1, c2, c3 = ''; }

• new function() 写法错误：这里不需要用new关键字，new function()会创建一个匿名函数的实例，而非你需要的普通赋值函数，正确写法是直接定义函数。
• 逗号运算符误用：tiles.a1, a2, a3... = '' 中，逗号是JavaScript的逗号运算符，它只会执行所有表达式并返回最后一个的值，所以实际上只有c3被赋值为空字符串，前面的tiles.a1、a2等都不会被赋值；而且a2、b1这类未加tiles.前缀的变量会变成全局变量（若未提前声明），完全达不到给tiles对象添加属性的目的。

正确的批量赋值实现方法 #

核心思路是先整理所有单元格的ID列表，通过循环动态给tiles对象添加属性并赋值，避免冗余代码：

1. 定义单元格ID列表 #

把所有需要处理的单元格ID存入数组，方便循环遍历：

const tileIds = ['a1', 'a2', 'a3', 'b1', 'b2', 'b3', 'c1', 'c2', 'c3'];

2. 初始化对象并批量赋值 #

用循环遍历ID数组，给tiles对象动态添加对应属性：

// 用字面量{}初始化对象，比new Object()更简洁常用
const tiles = {};

// 定义批量赋值函数
tiles.assignTiles = function() {
  tileIds.forEach(id => {
    // 方括号语法可以根据字符串动态设置对象属性
    tiles[id] = document.getElementById(id).value;
  });
};

// 调用函数完成赋值
tiles.assignTiles();

额外优化：实时同步输入值 #

如果需要在用户修改单元格内容时自动更新tiles里的值，可以给每个输入框绑定input事件：

tileIds.forEach(id => {
  document.getElementById(id).addEventListener('input', tiles.assignTiles);
});

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