僅在我的一個div中添加textContent的功能-有解無憂

const player = (name, symbol) => {
  return { name, symbol };
};

const Player1 = player("Player1", "X");
const Player2 = player("Player2", "O");
console.log(Player1);


for (i = 0; i < 9; i  ) {
  const getBoard = document.getElementById("board");
  const createBoard = document.createElement("div");
  getBoard.appendChild(createBoard);
  createBoard.className = "game-board";
}

function createPItem(name) {
  let p = document.createElement("p");
  p.textContent = name;
  p.className = "text";
  return p;
}

const board = document.querySelector(".game-board");

board.addEventListener("click", selectBoard);

function selectBoard() {
  board.appendChild(createPItem(`${Player1.symbol}`));
  board.className = "complete-board";
}

body {
  background-color: #fffdfa;
}

.title {
  font-size: 42px;
  font-family: "Dancing Script", cursive;
}

.player-turn {
  font-size: 24px;
}

.content {
  background-color: #fffdfa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 700px;
  width: 800px;
  margin: 0 auto;
  border-radius: 8px;
}

.board {
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: space-evenly;
  gap: 10px;
  background-color: #fff;
  height: 500px;
  width: 600px;
}

.board div,
.complete-board {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #000;
  background-color: #3c4048;
  width: 175px;
  height: 150px;
}

.board div:hover {
  background-color: #f4e06d;
  transform: scale(1.1);
  transition: 0.8s;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
}

.complete-board {
  background-color: #f4e06d !important;
}

.text {
  font-size: 64px;
}

.btn {
  display: inline-block;
  background-color: #4649ff;
  padding: 0.5em 2em;
  margin-top: 20px;
  cursor: pointer;
  font-family: "Poor Story", cursive;
  font-size: 2rem;
  letter-spacing: 0.4rem;
  transition: all 0.3s;
  text-decoration: none;
}

.btn:hover {
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.5);
}

.parallelogram {
  transform: skew(-20deg);
}

.skew-fix {
  display: inline-block;
  transform: skew(20deg);
}

<!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.css" />
    <title>Tic Tac Toe</title>
  </head>
  <body>
    <div class="content">
      <p class="title">Tic Tac Toe</p>
      <p class="player-turn">Player X turn</p>
      <div id="board" class="board"></div>
      <a id="btn" class="btn parallelogram">
        <span class="skew-fix">Reset ></span>
      </a>
    </div>
    <script src="app.js"></script>
  </body>
</html>

我正在制作井字游戲，我有一個函式可以創建兩個玩家，為每個玩家分配一個符號。

const player = (name, symbol) => {
  return { name, symbol };
};

const Player1 = player("Player1", "X");
const Player2 = player("Player2", "O");

我也有這個創建板的 HTML

    <div class="content">
      <p class="title">Tic Tac Toe</p>
      <p class="player-turn">Player X turn</p>
      <div id="board" class="board"></div>
    </div>

并使用display: flex這個 for 回圈的組合，我創建了 9 個完全適合游戲板的 div。

for (i = 0; i < 9; i  ) {
  const getBoard = document.getElementById("board");
  const createBoard = document.createElement("div");
  getBoard.appendChild(createBoard);
  createBoard.className = "game-board";
}

我有一個函式可以創建一個p元素并為其分配一個類以獲得正確的字體大小。

function createPItem(name) {
  let p = document.createElement("p");
  p.textContent = name;
  p.className = "text";
  return p;
}

最后是一個 eventListener，它選擇gameBoard我單擊的類并添加一些文本。

const board = document.querySelector(".game-board");

board.addEventListener("click", selectBoard);

function selectBoard() {
  board.appendChild(createPItem(`${Player1.symbol}`));
  board.className = "complete-board";
}

當我單擊board類中的第一個 div 時，上面的代碼可以完美運行并創建/分配p標簽。標簽里面p是字母“X”，這是我想要發生的。但是當我點擊任何其他 div 時，什么也沒有發生，我不知道為什么。

我試過的

我嘗試了幾種不同的方法的組合，包括更改 for 回圈以給每個 div 一個類名，board${i}但不僅看起來俗氣，它實際上并沒有作業，而是一次填充每個 div 的 textContent 。

uj5u.com熱心網友回復：

問題是因為您使用querySelector(".game-board")，它只會選擇第一個 .game-board元素。您需要使用querySelectorAll()查找具有該類的所有元素，然后遍歷它們以添加事件處理程式。

此外，selectBoard()需要修改函式以接受Event物件作為引數，這樣您就可以在不依賴全域變數的情況下獲得對單擊元素的參考：

const board = document.querySelectorAll(".game-board");
board.forEach(el => el.addEventListener("click", selectBoard));

function selectBoard(e) {
  e.target.appendChild(createPItem(`${Player1.symbol}`));
  e.target.className = "complete-board";
}

這是一個完整的作業版本：

const player = (name, symbol) => ({ name, symbol });

const Player1 = player("Player1", "X");
const Player2 = player("Player2", "O");

for (i = 0; i < 9; i  ) {
  const getBoard = document.querySelector("#board");
  const createBoard = document.createElement("div");
  getBoard.appendChild(createBoard);
  createBoard.className = "game-board";
}

function createPItem(name) {
  let p = document.createElement("p");
  p.textContent = name;
  p.className = "text";
  return p;
}

const board = document.querySelectorAll(".game-board");
board.forEach(el => el.addEventListener("click", selectBoard));

function selectBoard(e) {
  e.target.appendChild(createPItem(`${Player1.symbol}`));
  e.target.className = "complete-board";
  e.target.removeEventListener('click', selectBoard); // prevent additional clicks
}

#board {
  display: flex;
  flex-wrap: wrap;
  width: 150px;
  border: 1px solid #000;
}

#board .game-board,
#board .complete-board {
  flex: 1 1 30%;
  border: 1px solid #000;
  height: 50px;
}

#board .complete-board {
  background-color: #CCC;
  text-align: center;
}

<div id="board" class="board"></div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/527413.html

標籤：javascript

上一篇：React只渲染陣列中的一個組件

下一篇：選擇后如何從狀態中取消選擇值