如何正确将gameModule返回的数组渲染至DOM中？

问题描述 #

采用模块模式开发井字棋，gameModule模块返回代表游戏棋盘的静态gameBoard数组；renderGameBoard模块接收gameModule的实例作为参数，尝试渲染数组内容，但目前DOM显示[Object object]，控制台输出undefined，无法正确渲染数组。

问题原因 #

1. 遍历数组时错误访问了gameBoardDiv[property]，而非目标数组gameBoardEl[property]，导致控制台输出undefined
2. 直接将数组赋值给innerHTML会触发数组的toString()方法，既不符合井字棋棋盘的布局需求，也容易因操作不当出现异常显示
3. 未对数组元素进行结构化渲染，只是简单赋值，无法呈现预期的棋盘样式

修正后的代码 #

JavaScript代码 #

const renderDOM = (function () {
  // 游戏棋盘模块
  const gameModule = () => {
    let gameBoard = ['X', 'O', 'X', 'O', 'X', 'O', 'X', 'O', 'O'];
    return { gameBoard };
  };

  // 玩家工厂函数
  const playerFactory = (name, age) => {
    const attributes = {
      nameProp: name,
      ageProp: age,
    };
    const getAttributes = () => console.log(attributes);
    const getName = () => attributes.nameProp;
    const getAge = () => attributes.ageProp;
    const sayName = () =>
      console.log(`${getName()} has been created. She is ${getAge()}.`);

    return { getAttributes, getName, sayName };
  };

  // 渲染游戏棋盘函数
  const renderGameBoard = gameModuleFunc => {
    const gameBoardEl = gameModuleFunc.gameBoard;
    const container = document.querySelector('.container');
    const gameBoardDiv = document.createElement('div');
    // 给棋盘添加样式类，方便后续布局成3x3网格
    gameBoardDiv.classList.add('game-board');

    // 正确遍历数组并渲染每个格子
    gameBoardEl.forEach((cellValue, index) => {
      const cellDiv = document.createElement('div');
      cellDiv.classList.add('game-cell');
      cellDiv.textContent = cellValue;
      gameBoardDiv.appendChild(cellDiv);
      // 控制台正确输出每个元素的索引和值
      console.log(`索引${index} = ${cellValue}`);
    });

    container.appendChild(gameBoardDiv);

    return { gameBoardEl, container, gameBoardDiv };
  };

  renderGameBoard(gameModule());

  // 游戏流程控制
  const gameFlow = player => {
    let playerTurn = true;
  };
})();

CSS样式（补充实现3x3棋盘布局） #

.game-board {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 5px;
}

.game-cell {
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  background-color: #f0f0f0;
}

HTML代码（保持原结构即可） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles/style.css">
  <script src="js/app.js" defer></script>
  <title>Tic Tac Toe</title>
</head>
<body>
  <div class="container">
    
  </div>
</body>
</html>

关键修改说明 #

• 修复遍历逻辑：使用forEach遍历数组，通过索引+值的方式正确输出内容，解决控制台undefined问题
• 结构化渲染：为每个棋盘元素创建独立的DOM节点，组装成符合井字棋布局的3x3网格
• 添加样式支持：通过CSS Grid实现棋盘的网格布局，提升视觉呈现效果
• 移除无效变量：删除无意义的logToConsole变量，简化代码结构

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