I'm trying to make an AI for a puter that plays tic-tac-toe out of javascript, but I'm running into a console error that says that it can't read the property focus of undefined. My code:

window.addEventListener('load', () => {
  // Determine whether you are going first
  const humanTurnFirst = Math.random() >= 0.5;
  /**
   * Get an array of the text content of each of the tic-tac-toe buttons
   * @returns {Array} Array of the text content of each square, from top-left to bottom-right.
  */

  const getLayout = () => {
    // Array of buttons ordered from top-left to bottom right
    const buttons = [
      document.getElementsByClassName('corner-top-left')[0],
      document.getElementsByClassName('edge-top')[0],
      document.getElementsByClassName('corner-top-right')[0],
      document.getElementsByClassName('edge-left')[0],
      document.getElementsByClassName('center-button')[0],
      document.getElementsByClassName('edge-right')[0],
      document.getElementsByClassName('corner-bottom-left')[0],
      document.getElementsByClassName('edge-bottom')[0],
      document.getElementsByClassName('corner-bottom-right')[0],
    ];
    const layout = [];
    buttons.forEach(button => layout.push(button.innerText));
    return layout;
  };
  /**
   * Make the puter play a square
   * @param {Node} button The square to play
   */

  const autoClick = (button) => {
    console.log('button', button);
    const $turn = document.getElementsByClassName('turn')[0];
    $turn.innerText = 'Not your turn yet...';
    const $allButtons = [...document.getElementsByClassName('button')];
    const $allDisableableButtons = $allButtons
      .filter(
        element => element !== button
        && !element.disabled,
      );
    $allDisableableButtons.forEach((disableableButton) => {
      const thisButton = disableableButton;
      thisButton.disabled = true;
    });
    console.log('button', button);
    button.focus();
    setTimeout(() => {
      button.click();
      $allDisableableButtons.forEach((disableableButton) => {
        const thisButton = disableableButton;
        thisButton.disabled = false;
        $turn.innerText = 'Try clicking an empty space.';
      });
    }, 500);
  };
  /**
   * Calculate the best square for the puter to play.
   * @param {Array.<Node>} layout Array of the text of each square, from top-left to bottom right.
   * @param {Node|Boolean} previous The last move that you've made.
   */
  const puterTurn = (layout, previous, localHumanTurnFirst) => {
    const buttons = [
      document.getElementsByClassName('corner-top-left')[0],
      document.getElementsByClassName('edge-top')[0],
      document.getElementsByClassName('corner-top-right')[0],
      document.getElementsByClassName('edge-left')[0],
      document.getElementsByClassName('center-button')[0],
      document.getElementsByClassName('edge-right')[0],
      document.getElementsByClassName('corner-bottom-left')[0],
      document.getElementsByClassName('edge-bottom')[0],
      document.getElementsByClassName('corner-bottom-right')[0],
    ];
    const $corners = [...document.getElementsByClassName('corner')];
    // If there is no previous move, the puter goes first with a random corner.
    if (!previous) {
      const randomBelow4 = Math.floor(Math.random() * 4);
      const randomCorner = $corners[randomBelow4];
      autoClick(randomCorner);
      /* If the puter is going first,
        has already filled out a random corner,
        and there is nothing in the center,
        it will place another X in one of the adgacent corners.
      */
    } else if (
      !localHumanTurnFirst
      && layout.filter(element => element === 'X').length === 1
      && previous !== buttons[4]
    ) {
      const filledOutCorner = buttons.filter(element => element.innerText === 'X')[0];
      const diagonalCorner = document.getElementsByClassName(filledOutCorner.className
        .split(/\s+/)[2]
        .replace(/(left|right)/, match => (match === 'left' ? 'right' : 'left'))
        .replace(/(top|bottom)/, match => (match === 'top' ? 'bottom' : 'top')))[0];
      const emptyCorners = $corners.filter(corner => corner.innerText === 'Empty');
      const adjacentCorners = emptyCorners.filter(element => element !== diagonalCorner);
      const potentialCorners = adjacentCorners
        .filter(
          corner => document.getElementsByClassName(`edge-${corner.className.split(/\s+/)[2].split('-')[1]}`)[0].innerText === 'Empty'
            && document.getElementsByClassName(`edge-${corner.className.split(/\s+/)[2].split('-')[2]}`)[0].innerText === 'Empty',
        );
      const randomPotentialCorner = potentialCorners[
        Math.floor(
          Math.random()
          * potentialCorners.length,
        )
      ];
      autoClick(randomPotentialCorner);
    } else if (
      !localHumanTurnFirst
      && buttons.filter(button => button.innerText === 'X' && button.className.split(/\s+/).includes('corner')).length === 2
      && buttons.filter(button => button.innerText === 'O' && [...document.getElementsByClassName(`corner-${button.className.replace('button edge edge-', '')}`)].every(element => element.innerText === 'X')).length === 1
    ) {
      autoClick(buttons[4]);
    }
  };
  /**
   * Add event listener for squares
   * @param {Boolean} localHumanTurnFirst Whether you go first.
   */
  const squaresOnClick = (localHumanTurnFirst, isHumanTurn) => {
    const humanLetter = localHumanTurnFirst ? 'X' : 'O';
    const puterLetter = localHumanTurnFirst ? 'O' : 'X';
    const $squares = [...document.getElementsByClassName('button')];
    $squares.forEach((square) => {
      const thisSquare = square;
      square.addEventListener('click', () => {
        if (isHumanTurn) {
          thisSquare.innerText = humanLetter;
          puterTurn(getLayout(), thisSquare, localHumanTurnFirst);
          squaresOnClick(localHumanTurnFirst, false);
        } else {
          thisSquare.innerText = puterLetter;
          squaresOnClick(localHumanTurnFirst, true);
        }
        thisSquare.disabled = true;
      });
    });
  };
  /**
   * Turn the wele screen into the game screen.
   * @param {Boolean} localHumanTurnFirst Whether you go first.
   */
  const spawnSquares = (localHumanTurnFirst) => {
    const $turn = document.getElementsByClassName('turn')[0];
    const $mainGame = document.getElementsByClassName('main-game')[0];
    $turn.innerText = 'Try clicking an empty space.';
    $mainGame.className = 'main-game dp-4 tic-tac-toe';
    $mainGame.setAttribute('aria-label', 'Tic-tac-toe grid');
    $mainGame.innerHTML = `
      <button class="button corner corner-top-left corner-top corner-left">Empty</button>
      <button class="button edge edge-top">Empty</button>
      <button class="button corner corner-top-right corner-top corner-right">Empty</button>
      <button class="button edge edge-left">Empty</button>
      <button class="button center-button">Empty</button>
      <button class="button edge edge-right">Empty</button>
      <button class="button corner corner-bottom-left corner-bottom corner-left">Empty</button>
      <button class="button edge edge-bottom">Empty</button>
      <button class="button corner corner-bottom-right corner-bottom corner-right">Empty</button>
    `;
    squaresOnClick(localHumanTurnFirst, localHumanTurnFirst);
    if (!localHumanTurnFirst) {
      puterTurn(getLayout(), false, localHumanTurnFirst);
    }
  };
  /**
   * Create the button that starts the game.
   */
  const weleButton = (localHumanTurnFirst) => {
    const $weleButton = document.getElementsByClassName('start-button')[0];
    $weleButton.addEventListener('click', () => spawnSquares(localHumanTurnFirst));
  };
  /**
   * Turn the main game into the wele screen.
   * @param {Boolean} localHumanTurnFirst Whether you go first.
   */
  const wele = (localHumanTurnFirst) => {
    const $mainGame = document.getElementsByClassName('main-game')[0];
    const $turn = document.getElementsByClassName('turn')[0];
    $turn.innerText = 'Wele!';
    $mainGame.className = 'main-game dp-4 wele center';
    $mainGame.innerHTML = `
    <section class="wele-section">
      <h2 class="wele-heading">Wele to unbeatable tic-tac-toe!</h2>
      <p class="wele-text">
        According to random chance, your turn has already been chosen
        as ${localHumanTurnFirst ? 'first (with an X)' : 'second (with an O)'}, which 
        means that the puter is going 
        ${localHumanTurnFirst ? 'second (with an O)' : 'first (with an X)'}. <strong>
          Press the start button to start the game!</strong
        >
      </p>
    </section>
    <button class="start-button button">Start</button>
  `;
    weleButton(localHumanTurnFirst);
  };
  wele(humanTurnFirst);
});

When I call puterTurn when the first elseif condition is true, I get this weird output in the console:

The problem is in these lines, I think:

    } else if (
  !localHumanTurnFirst
  && layout.filter(element => element === 'X').length === 1
  && previous !== buttons[4]
) {
  const filledOutCorner = buttons.filter(element => element.innerText === 'X')[0];
  const diagonalCorner = document.getElementsByClassName(filledOutCorner.className
    .split(/\s+/)[2]
    .replace(/(left|right)/, match => (match === 'left' ? 'right' : 'left'))
    .replace(/(top|bottom)/, match => (match === 'top' ? 'bottom' : 'top')))[0];
  const emptyCorners = $corners.filter(corner => corner.innerText === 'Empty');
  const adjacentCorners = emptyCorners.filter(element => element !== diagonalCorner);
  const potentialCorners = adjacentCorners
    .filter(
      corner => document.getElementsByClassName(`edge-${corner.className.split(/\s+/)[2].split('-')[1]}`)[0].innerText === 'Empty'
        && document.getElementsByClassName(`edge-${corner.className.split(/\s+/)[2].split('-')[2]}`)[0].innerText === 'Empty',
    );
  const randomPotentialCorner = potentialCorners[
    Math.floor(
      Math.random()
      * potentialCorners.length,
    )
  ];
  autoClick(randomPotentialCorner);
} else if (
  !localHumanTurnFirst
  && buttons.filter(button => button.innerText === 'X' && button.className.split(/\s+/).includes('corner')).length === 2
  && buttons.filter(button => button.innerText === 'O' && [...document.getElementsByClassName(`corner-${button.className.replace('button edge edge-', '')}`)].every(element => element.innerText === 'X')).length === 1
) {
  autoClick(buttons[4]);
}

It appears like autoClick is being called thrice. This doesn't appear to be affecting my actual code, but I think console errors are pretty annoying, and I want to get to the bottom of this. Thanks so much for your time, and I'm sorry if I'm being really vague.

EDIT: console.log('button', button)

I'm trying to make an AI for a puter that plays tic-tac-toe out of javascript, but I'm running into a console error that says that it can't read the property focus of undefined. My code:

window.addEventListener('load', () => {
  // Determine whether you are going first
  const humanTurnFirst = Math.random() >= 0.5;
  /**
   * Get an array of the text content of each of the tic-tac-toe buttons
   * @returns {Array} Array of the text content of each square, from top-left to bottom-right.
  */

  const getLayout = () => {
    // Array of buttons ordered from top-left to bottom right
    const buttons = [
      document.getElementsByClassName('corner-top-left')[0],
      document.getElementsByClassName('edge-top')[0],
      document.getElementsByClassName('corner-top-right')[0],
      document.getElementsByClassName('edge-left')[0],
      document.getElementsByClassName('center-button')[0],
      document.getElementsByClassName('edge-right')[0],
      document.getElementsByClassName('corner-bottom-left')[0],
      document.getElementsByClassName('edge-bottom')[0],
      document.getElementsByClassName('corner-bottom-right')[0],
    ];
    const layout = [];
    buttons.forEach(button => layout.push(button.innerText));
    return layout;
  };
  /**
   * Make the puter play a square
   * @param {Node} button The square to play
   */

  const autoClick = (button) => {
    console.log('button', button);
    const $turn = document.getElementsByClassName('turn')[0];
    $turn.innerText = 'Not your turn yet...';
    const $allButtons = [...document.getElementsByClassName('button')];
    const $allDisableableButtons = $allButtons
      .filter(
        element => element !== button
        && !element.disabled,
      );
    $allDisableableButtons.forEach((disableableButton) => {
      const thisButton = disableableButton;
      thisButton.disabled = true;
    });
    console.log('button', button);
    button.focus();
    setTimeout(() => {
      button.click();
      $allDisableableButtons.forEach((disableableButton) => {
        const thisButton = disableableButton;
        thisButton.disabled = false;
        $turn.innerText = 'Try clicking an empty space.';
      });
    }, 500);
  };
  /**
   * Calculate the best square for the puter to play.
   * @param {Array.<Node>} layout Array of the text of each square, from top-left to bottom right.
   * @param {Node|Boolean} previous The last move that you've made.
   */
  const puterTurn = (layout, previous, localHumanTurnFirst) => {
    const buttons = [
      document.getElementsByClassName('corner-top-left')[0],
      document.getElementsByClassName('edge-top')[0],
      document.getElementsByClassName('corner-top-right')[0],
      document.getElementsByClassName('edge-left')[0],
      document.getElementsByClassName('center-button')[0],
      document.getElementsByClassName('edge-right')[0],
      document.getElementsByClassName('corner-bottom-left')[0],
      document.getElementsByClassName('edge-bottom')[0],
      document.getElementsByClassName('corner-bottom-right')[0],
    ];
    const $corners = [...document.getElementsByClassName('corner')];
    // If there is no previous move, the puter goes first with a random corner.
    if (!previous) {
      const randomBelow4 = Math.floor(Math.random() * 4);
      const randomCorner = $corners[randomBelow4];
      autoClick(randomCorner);
      /* If the puter is going first,
        has already filled out a random corner,
        and there is nothing in the center,
        it will place another X in one of the adgacent corners.
      */
    } else if (
      !localHumanTurnFirst
      && layout.filter(element => element === 'X').length === 1
      && previous !== buttons[4]
    ) {
      const filledOutCorner = buttons.filter(element => element.innerText === 'X')[0];
      const diagonalCorner = document.getElementsByClassName(filledOutCorner.className
        .split(/\s+/)[2]
        .replace(/(left|right)/, match => (match === 'left' ? 'right' : 'left'))
        .replace(/(top|bottom)/, match => (match === 'top' ? 'bottom' : 'top')))[0];
      const emptyCorners = $corners.filter(corner => corner.innerText === 'Empty');
      const adjacentCorners = emptyCorners.filter(element => element !== diagonalCorner);
      const potentialCorners = adjacentCorners
        .filter(
          corner => document.getElementsByClassName(`edge-${corner.className.split(/\s+/)[2].split('-')[1]}`)[0].innerText === 'Empty'
            && document.getElementsByClassName(`edge-${corner.className.split(/\s+/)[2].split('-')[2]}`)[0].innerText === 'Empty',
        );
      const randomPotentialCorner = potentialCorners[
        Math.floor(
          Math.random()
          * potentialCorners.length,
        )
      ];
      autoClick(randomPotentialCorner);
    } else if (
      !localHumanTurnFirst
      && buttons.filter(button => button.innerText === 'X' && button.className.split(/\s+/).includes('corner')).length === 2
      && buttons.filter(button => button.innerText === 'O' && [...document.getElementsByClassName(`corner-${button.className.replace('button edge edge-', '')}`)].every(element => element.innerText === 'X')).length === 1
    ) {
      autoClick(buttons[4]);
    }
  };
  /**
   * Add event listener for squares
   * @param {Boolean} localHumanTurnFirst Whether you go first.
   */
  const squaresOnClick = (localHumanTurnFirst, isHumanTurn) => {
    const humanLetter = localHumanTurnFirst ? 'X' : 'O';
    const puterLetter = localHumanTurnFirst ? 'O' : 'X';
    const $squares = [...document.getElementsByClassName('button')];
    $squares.forEach((square) => {
      const thisSquare = square;
      square.addEventListener('click', () => {
        if (isHumanTurn) {
          thisSquare.innerText = humanLetter;
          puterTurn(getLayout(), thisSquare, localHumanTurnFirst);
          squaresOnClick(localHumanTurnFirst, false);
        } else {
          thisSquare.innerText = puterLetter;
          squaresOnClick(localHumanTurnFirst, true);
        }
        thisSquare.disabled = true;
      });
    });
  };
  /**
   * Turn the wele screen into the game screen.
   * @param {Boolean} localHumanTurnFirst Whether you go first.
   */
  const spawnSquares = (localHumanTurnFirst) => {
    const $turn = document.getElementsByClassName('turn')[0];
    const $mainGame = document.getElementsByClassName('main-game')[0];
    $turn.innerText = 'Try clicking an empty space.';
    $mainGame.className = 'main-game dp-4 tic-tac-toe';
    $mainGame.setAttribute('aria-label', 'Tic-tac-toe grid');
    $mainGame.innerHTML = `
      <button class="button corner corner-top-left corner-top corner-left">Empty</button>
      <button class="button edge edge-top">Empty</button>
      <button class="button corner corner-top-right corner-top corner-right">Empty</button>
      <button class="button edge edge-left">Empty</button>
      <button class="button center-button">Empty</button>
      <button class="button edge edge-right">Empty</button>
      <button class="button corner corner-bottom-left corner-bottom corner-left">Empty</button>
      <button class="button edge edge-bottom">Empty</button>
      <button class="button corner corner-bottom-right corner-bottom corner-right">Empty</button>
    `;
    squaresOnClick(localHumanTurnFirst, localHumanTurnFirst);
    if (!localHumanTurnFirst) {
      puterTurn(getLayout(), false, localHumanTurnFirst);
    }
  };
  /**
   * Create the button that starts the game.
   */
  const weleButton = (localHumanTurnFirst) => {
    const $weleButton = document.getElementsByClassName('start-button')[0];
    $weleButton.addEventListener('click', () => spawnSquares(localHumanTurnFirst));
  };
  /**
   * Turn the main game into the wele screen.
   * @param {Boolean} localHumanTurnFirst Whether you go first.
   */
  const wele = (localHumanTurnFirst) => {
    const $mainGame = document.getElementsByClassName('main-game')[0];
    const $turn = document.getElementsByClassName('turn')[0];
    $turn.innerText = 'Wele!';
    $mainGame.className = 'main-game dp-4 wele center';
    $mainGame.innerHTML = `
    <section class="wele-section">
      <h2 class="wele-heading">Wele to unbeatable tic-tac-toe!</h2>
      <p class="wele-text">
        According to random chance, your turn has already been chosen
        as ${localHumanTurnFirst ? 'first (with an X)' : 'second (with an O)'}, which 
        means that the puter is going 
        ${localHumanTurnFirst ? 'second (with an O)' : 'first (with an X)'}. <strong>
          Press the start button to start the game!</strong
        >
      </p>
    </section>
    <button class="start-button button">Start</button>
  `;
    weleButton(localHumanTurnFirst);
  };
  wele(humanTurnFirst);
});

When I call puterTurn when the first elseif condition is true, I get this weird output in the console:

The problem is in these lines, I think:

    } else if (
  !localHumanTurnFirst
  && layout.filter(element => element === 'X').length === 1
  && previous !== buttons[4]
) {
  const filledOutCorner = buttons.filter(element => element.innerText === 'X')[0];
  const diagonalCorner = document.getElementsByClassName(filledOutCorner.className
    .split(/\s+/)[2]
    .replace(/(left|right)/, match => (match === 'left' ? 'right' : 'left'))
    .replace(/(top|bottom)/, match => (match === 'top' ? 'bottom' : 'top')))[0];
  const emptyCorners = $corners.filter(corner => corner.innerText === 'Empty');
  const adjacentCorners = emptyCorners.filter(element => element !== diagonalCorner);
  const potentialCorners = adjacentCorners
    .filter(
      corner => document.getElementsByClassName(`edge-${corner.className.split(/\s+/)[2].split('-')[1]}`)[0].innerText === 'Empty'
        && document.getElementsByClassName(`edge-${corner.className.split(/\s+/)[2].split('-')[2]}`)[0].innerText === 'Empty',
    );
  const randomPotentialCorner = potentialCorners[
    Math.floor(
      Math.random()
      * potentialCorners.length,
    )
  ];
  autoClick(randomPotentialCorner);
} else if (
  !localHumanTurnFirst
  && buttons.filter(button => button.innerText === 'X' && button.className.split(/\s+/).includes('corner')).length === 2
  && buttons.filter(button => button.innerText === 'O' && [...document.getElementsByClassName(`corner-${button.className.replace('button edge edge-', '')}`)].every(element => element.innerText === 'X')).length === 1
) {
  autoClick(buttons[4]);
}

It appears like autoClick is being called thrice. This doesn't appear to be affecting my actual code, but I think console errors are pretty annoying, and I want to get to the bottom of this. Thanks so much for your time, and I'm sorry if I'm being really vague.

EDIT: console.log('button', button)

• javascript
• ecmascript-6

• can you check the line 43, are you calling the actual class name. Check for any typo – Beginner Commented Mar 2, 2019 at 17:17
• basically the error is something you are trying to access in the dom but which is undefined, just check by putting a console.log() of the element, and not able to identify where are you calling the focus , can you post the line where you are getting error – Beginner Commented Mar 2, 2019 at 17:20
• @DILEEPTHOMAS I put a console.log(button) in the autoClick function in various places. – fifn2 Commented Mar 2, 2019 at 17:26
• what it is giving undefined or what console.log("button", button). Even if its undefined you will be able to understand easily – Beginner Commented Mar 2, 2019 at 17:29
• @DILEEPTHOMAS I don't understand. Do you want me to put "button" before the button so that people don't get confused? – fifn2 Commented Mar 2, 2019 at 17:35

1 Answer 1

I've found out why this is.

I need to make my autoClick function return immediately if the button is falsy (or undefined) with this magical one liner:

 if (!button) { return; }