javascript - 无法从扩展标点符号中读取元素的 innerText 的未定义属性

Question

我正在制作一个 javascript 变量，它应该通过传播语法存储一个数组(而不是节点列表):

const $corners = [...document.getElementsByClassName('corner')];

并过滤掉所有不显示“空”的项目:

const emptyCorners = $corners.filter(corner => corner.innerText === 'Empty');

我收到一个令人讨厌的控制台错误:

当然，我通过带有 airbnb 预设的 babel 来实现。我究竟做错了什么？感谢您的时间。我的完整代码

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 computer play a square
   * @param {Node} button The square to play
   */

  const autoClick = (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;
    });
    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 computer 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 computerTurn = (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 computer goes first with a random corner.
    if (!previous) {
      const randomBelow4 = Math.floor(Math.random() * 4);
      const randomCorner = $corners[randomBelow4];
      autoClick(randomCorner);
      /* If the computer 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(`${corner.className.split(/\s+/)[2].split('-')[1]}-edge`)[0].innerText
            && !document.getElementsByClassName(`${corner.className.split(/\s+/)[2].split('-')[2]}-edge`)[0].innerText,
        );
      console.log(potentialCorners);
      /*       const randomPotentialCorner = adjacentCorners[Math.floor(Math.random())];
      autoClick(randomPotentialCorner);
    */ }
  };
  /**
   * Add event listener for squares
   * @param {Boolean} localHumanTurnFirst Whether you go first.
   */
  const squaresOnClick = (localHumanTurnFirst, isHumanTurn) => {
    const humanLetter = localHumanTurnFirst ? 'X' : 'O';
    const computerLetter = localHumanTurnFirst ? 'O' : 'X';
    const $squares = [...document.getElementsByClassName('button')];
    $squares.forEach((square) => {
      const thisSquare = square;
      square.addEventListener('click', () => {
        if (isHumanTurn) {
          thisSquare.innerText = humanLetter;
          computerTurn(getLayout(), thisSquare, localHumanTurnFirst);
          squaresOnClick(localHumanTurnFirst, false);
        } else {
          thisSquare.innerText = computerLetter;
          squaresOnClick(localHumanTurnFirst, true);
        }
        thisSquare.disabled = true;
      });
    });
  };
  /**
   * Turn the welcome 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) {
      computerTurn(getLayout(), false, localHumanTurnFirst);
    }
  };
  /**
   * Create the button that starts the game.
   */
  const welcomeButton = (localHumanTurnFirst) => {
    const $welcomeButton = document.getElementsByClassName('start-button')[0];
    $welcomeButton.addEventListener('click', () => spawnSquares(localHumanTurnFirst));
  };
  /**
   * Turn the main game into the welcome screen.
   * @param {Boolean} localHumanTurnFirst Whether you go first.
   */
  const welcome = (localHumanTurnFirst) => {
    const $mainGame = document.getElementsByClassName('main-game')[0];
    const $turn = document.getElementsByClassName('turn')[0];
    $turn.innerText = 'Welcome!';
    $mainGame.className = 'main-game dp-4 welcome center';
    $mainGame.innerHTML = `
    <section class="welcome-section">
      <h2 class="welcome-heading">Welcome to unbeatable tic-tac-toe!</h2>
      <p class="welcome-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 computer 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>
  `;
    welcomeButton(localHumanTurnFirst);
  };
  welcome(humanTurnFirst);
});

编辑:
过滤器回调中 console.logging Angular 的控制台输出是:
而只是 document.getElementsByClassName('corner'):

所以，这一定与导致问题的格式更改有关。

Answer 1

所以错误就在下面几行，这里:

const potentialCorners = adjacentCorners
        .filter(
          corner => !document.getElementsByClassName(`${corner.className.split(/\s+/)[2].split('-')[1]}-edge`)[0].innerText
            && !document.getElementsByClassName(`${corner.className.split(/\s+/)[2].split('-')[2]}-edge`)[0].innerText,
        );

您有这样的类:edge-* 而不是这样的:*-edge 所以您必须在此处更改选择器:

const potentialCorners = adjacentCorners
        .filter(
          corner => !document.getElementsByClassName(`edge-${corner.className.split(/\s+/)[2].split('-')[1]}`)[0].innerText
            && !document.getElementsByClassName(`edge-${corner.className.split(/\s+/)[2].split('-')[2]}`)[0].innerText,
        );

---

此外，您在 Chrome 控制台中看到的奇怪格式只是 HTML 元素在控制台中的表示。这只是意味着那些是 HTML 元素，而 Chrome 只是像那样显示它们