javascript – Cannot read innerHTML on a non-working JS Tic-Tac-Toe game

I'm building a JS Tic-Tac-Toe game to better understand JS and simple game logic. This is a simple ttt game and I have a problem with not being able to capture the innerHTML to select the next round (human or IT). In addition, any advice for better strategies would be welcome. I also tried to create a square attribute in the global object gameBoard that could be edited or accessed anywhere in the app, but encountered a problem with the div assignments all being ttt-8 on the board.

// tic-tac-toe 
// human = "O"
// computer = "X" 

import "./styles.css";

// Global gameBoard object. gameBoard.square is not used. Tried to implement 
// but could not build board correctly.
const gameBoard = { board: (), square: null }; 

function play() {
  buildBoard()
};

function turn(square) {
  console.log(square.innerHTML) // THIS DOESN'T SHOW THE innerHTML EITHER X OR O, only "" 
  if (gameBoard.board.indexOf(null) === -1) {
    console.log("No winner!");
    play();
  } else if (square.innerHTML === "O") {
    computer(square);
  } else if (square.innerHTML === "X") {
    human(square);
  }
};

function human(square) {
  let move = square.dataset.idx;
  gameBoard.board(move) = 0;
  square.innerHTML = "O";
  square.classList.add("human");
  checkWinner();
  square.removeEventListener("click", turn());
 };

function computer(square) {
  let move = dumbAI()
  gameBoard.board(move) = 1;
  square.innerHTML = "X";
  square.classList.add("computer");
  checkWinner();
  square.removeEventListener("click", turn());
};


function buildBoard() {
  const container = document.getElementById("ttt-game"); 
  container.innerHTML = "";
  for (let i = 0; i < 9; i++) {
    gameBoard.board.push(null);
    let square = document.createElement("div");
    square.innnerHTML = " ";
    square.dataset.idx = i;
    square.id = "ttt-" + i;
    square.addEventListener("click", () => turn(square))
    container.appendChild( square );
  }
};

function checkWinner() {
  let win = null;
  // Horizontal row checks
  for (let i = 0; i < 9; i += 3) {
    if (
      gameBoard.board(i) !== null &&
      gameBoard.board(i + 1) != null &&
      gameBoard.board(i + 2) != null
    ) {
      if (
        gameBoard.board(i) === gameBoard.board(i + 1) &&
        gameBoard.board(i + 1) === gameBoard.board(i + 2)
      ) {
        win = gameBoard.board(i);
      }
    }
    if (win !== null) {
      break;
    }
  };
  // Vertical row checks
  if (win === null) {
    for (let i = 0; i < 3; i++) {
      if (
        gameBoard.board(i) !== null &&
        gameBoard.board(i + 3) !== null &&
        gameBoard.board(i + 6) !== null
      ) {
        if (
          gameBoard.board(i) === gameBoard.board(i + 3) &&
          gameBoard.board(i + 3) === gameBoard.board(i + 6)
        ) {
          win = gameBoard.board(i);
        }
        if (win !== null) {
          break;
        }
      }
    };
  }
  // Diaganal row checks
  if (win === null) {
    if (
      gameBoard.board(0) !== null &&
      gameBoard.board(4) !== null &&
      gameBoard.board(8) !== null
    ) {
      if (
        gameBoard.board(0) === gameBoard.board(4) &&
        gameBoard.board(4) === gameBoard.board(8)
      ) {
        win = gameBoard.board(4);
      }
    }
  };
  if (win === null) {
    if (
      gameBoard.board(2) !== null &&
      gameBoard.board(4) !== null &&
      gameBoard.board(6) !== null
    ) {
      if (
        gameBoard.board(2) === gameBoard.board(4) &&
        gameBoard.board(4) === gameBoard.board(6)
      ) {
        win = gameBoard.board(4);
      }
    }
  };
  // We have a winner
  if (win !== null) {
    console.log("WINNER - " + (win === 0 ? "human" : "Computer"));
    play();
  }
};

function dumbAI() {
  let open = ();
  for (let i = 0; i < 9; i++) {
    if (gameBoard.board(i) === null) {
      open.push(i);
    }
  }
  const random = Math.floor(Math.random() * (open.length - 1));
  return open(random);
}

document.addEventListener('DOMContentLoaded', play())
body {
  font-family: sans-serif;
}

#ttt-game {
  display: grid;
  max-width: 600px;
  margin: 0 auto;
  grid-template-columns: 33% 33% 33%;
  grid-gap: 5px;
}
#ttt-game div {
  font-size: 3em;
  text-align: center;
  background: rgb(158, 143, 143);
  padding: 50px;
}
#ttt-game div.player {
  background: #c2e3ff;
}
#ttt-game div.computer {
  background: #ffebeb;
}


  
    Sandbox for packages
    
  

  
    

string disabling non-working style characters Harlowe

http://twinery.org/wiki/twine2:how_to_format_text

Boom! == “Boom!

What is ` ? Is it? Because if it is & # 39;Boom!& # 39; & # 39; does not work and does not work "Boom!"in fact" text "seems to be equivalent to ** text ** even though it does not say that on the documentation pages the program binds me.