Rendering values from a JavaScript array into the DOM

Question

I'm working with modules trying to return a gameBoard array. In my first module gameModule, I'm returning a static array representing the game board values via a gameBoard variable. in my renderGameBoard module, it takes a parameter gameModuleFunc with the gameModule as an argument returning its hard-coded array.

I'm trying to return the values of the gameModuleFunc argument

const renderDOM = (function () {
  // Create a gameBoard object
  const gameModule = () => {
    // Create a gameBoard array inside of the gameBoard object
    let gameBoard = ['X', 'O', 'X', 'O', 'X', 'O', 'X', 'O', 'O'];

    return { gameBoard };
  };

  // Create player factory functions
  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 => {
    let gameBoardEl = gameModuleFunc.gameBoard;
    const container = document.querySelector('.container');
    let gameBoardDiv = document.createElement('div');
    let logToConsole;

    for (let property in gameBoardEl) {
      logToConsole = console.log(`${property} = ${gameBoardDiv[property]}`);
    }

    gameBoardDiv.innerHTML = gameBoardEl;
    container.appendChild(gameBoardDiv);

    return { gameBoardEl, container, gameBoardDiv, logToConsole };
  };

  renderGameBoard(gameModule());
  // Create game flow
  const gameFlow = player => {
    let playerTurn = true;
  };
})();

<!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>

in renderGameBoard but instead the DOM is rendering [Object object]. I looked this up and referenced some info from this article to iterate through the array, but I keep getting undefined in the console.

Ultimately, with my renderGameBoard function, I want to render the return values of the array from gameModule, but that doesn't work with what I've tried so far.

score 0 · Answer 1 · answered Oct 21 '22 at 14:55

Instead of grabbing the gameBoard array from gameModule, in the renderGameBoard function, I was simply returning the gameModule function without returning the gameBoard array. You'll see the change in the gameBoardEl variable inside the renderGameBoard function. I also updated my code to show the returned values.

Rendering values from a JavaScript array into the DOM

1 Answers1