当我按下 submit/play 时，表单上的事件侦听器不会触发

Question

我想让表单提交 playerOne 和 playerTwo 的名称，但我似乎无法弄清楚，当我在表单上监听提交事件时，它并没有触发它。在下面的片段中是我所有的代码。

form.addEventListener('submit', (event) => {
      event.preventDefault();
      console.log("Doesnt work")
    })

// player factory...
const playerFactory = (name, mark) => {
  const playTurn = (event, currentPlayer) => {
    const id = boardObject.cells.indexOf(event.target);
    boardObject.boardArray[id] = currentPlayer;
    boardObject.render();
  };

  return {
    playTurn, name, mark
  };
};

// Gameboard object...
const boardObject = (() => {
  let boardArray = ["", "", "", "", "", "", "", "", ""];

  const cells = Array.from(document.querySelectorAll(".cell"));
  // displays the content of the boardArray...
  const render = () => {
    boardArray.forEach((mark, idx) => {
      cells[idx].textContent = boardArray[idx];
    });
  };

  const checkWin = (currentPlayer) => {
    const winArraysCombinations = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6],
    ];

    return winArraysCombinations.some((combination) => {
      return combination.every((index) => {
        return boardArray[index].includes(currentPlayer);
      });
    });
  };

  const isDraw = (playerOne, playerTwo) => {
    return boardArray.every((cell) => {
      return cell.includes(playerOne) || cell.includes(playerTwo);
    });
  };

  return {
    boardArray,
    render,
    cells,
    checkWin,
    isDraw,
  };
})();

// Display controller ...
const displayController = (() => {
  const player = playerFactory();
  const playerOneName = document.querySelector('#playerx');
  const playerTwoName = document.querySelector('#playero');
  const resetButton = document.querySelector('.reset_button');
  const formdiv = document.querySelector('.input_form');
  
  const gameBoard = document.querySelector(".game_board");
  const form = document.querySelector('.player_info');
  let playerOne;
  let playerTwo ;
  let currentPlayer;
  

  const switchPlayer = () => {
    currentPlayer = currentPlayer === playerOne ? playerTwo : playerOne;
  };

  gameBoard.addEventListener("click", (event) => {
    event.preventDefault();
    if (event.target.classList.contains("cell")) {
      if (event.target.textContent === "") {
        event.target.textContent = currentPlayer;
        player.playTurn(event, currentPlayer);
        if (boardObject.checkWin(currentPlayer)) {
          console.log(currentPlayer + " is winner!");
        } else if (boardObject.isDraw(playerOne, playerTwo)) {
          console.log("draw");
        } else {
          switchPlayer();
        }
      }
    }

    const init = () => {
      if (playerOneName.value !== '' && playerTwoName !== '' ) {
        playerOne = playerFactory(playerOneName.value, 'X');
        playerTwo = playerFactory(playerTwoName.value, 'O');
        currentPlayer = playerOne;
      };
    }

    form.addEventListener('submit', (event) => {
      event.preventDefault();
      console.log("Doesnt work")
    })
    
    
      // if (playerOneName.value !== '' && playerTwoName.value !== '') {
      //   init();
      //   console.log(playerOne)
      // } else {
      //   window.location.reload();
      // }
    

    

    return { currentPlayer, playerOne, playerTwo, init };
  });
})();

*, *::before, *::after {
    box-sizing: border-box;
    margin:0;
    padding:0;
}

body {
    font-family: 'Roboto', sans-serif;
    background: #BEE9E8;
}

header {
    background: #1B4965;
    text-align: center;
    color: #62B6CB;
    padding-top: 20px;
    padding-bottom: 10px;
}



.game_board {
    display: grid;
    width: 500px;
    height: 500px;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto;
    margin-top: 40px;
    border: 5px solid #1B4965;
    border-radius: 10px;
    
}

.hidden {
    display: none;
}

.cell {
    border: 5px solid #1B4965;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #62b6cb;
    color:#1b4965;
    font-size:4em;
    font-weight: bold;
}

.player_info {
    color:#1B4965;
    font-size: 2em;
}

.input_form {
    display: flex;
    margin-top: 50px;
    justify-content: center;
    text-align: center;
    
}

.player_group {
    margin-top:20px;
}

input { 
    padding: 15px;
    border-radius: 5px;
    background: #1A4965;
    color: #62B6CB;
    
}

input::placeholder {
    color: #62b6cb;
}

#reset {
    padding: 10px;
    background: #1A4965;
    color: #62b6cb;
}

.reset_button {
    text-align: center;
    margin-top: 30px;
    padding: 10px;
}

.submitButton {
    margin-top: 15px;
    padding:5px;
    width: 100px;
    color:#62b6cb;
    background: #1A4965;
    border-radius: 5px;
    font-weight: bold;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <h1>Tic - Tac - Toe<br>The Odin Project</h1>
    </header>

    <div class="input_form">
        <form class="player_info">
            <div class="player_group">
                <label for="playerx">Player X:</label>
                <input type="text" id="playerx" name="playerx" placeholder="Name of player X">
            </div>

            <div class="player_group">
                <label for="playero">Player O:</label>
                <input type="text" id="playero" name="playero" placeholder="Name of player O">
            </div>
            <div><input type="submit" class="submitButton"  value="Play !"></div>
        </form>
    </div> 
        

        
        <div class="game_board hidden">
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
        </div>
        <div class="reset_button hidden">
            <button id="reset">Restart the game!</button>
        </div>
        
    



    <script src="./index.js" defer></script>
</body>
</html>

Answer 1

问题是事件侦听器被添加的位置 - 现在，您在 gameBoard click 事件中有它。由于该事件仅在 gameBoard 被点击后运行，并且 gameBoard 尚不可见，因此无法触发点击事件，并且永远不会将侦听器添加到表单中。

如果你只是想从一开始就附加它（你可能会这样做） - 只需将 form.addEventListener() 块移到 gameBoard.addEventlistener() 块之外，比如在结束后 "});"在 javascript 文件的 second-to-last 代码行中。

当我按下 submit/play 时，表单上的事件侦听器不会触发

Event listener on form doesn't fire when I press submit/play

javascript

module

function

dom-events