如何清除 div 中的值（TICTACTOE GAME）

Question

我需要帮助来清除我的井字游戏的 div 值。这是我拥有的 HTML 代码：<div class="btns">            <button class="btnstart" id="start">Start game</button><button class="btnrefresh" id="refresh">Refresh</button>        </div>        <div class="play-area gray pointerEvents">            <div id="block_0" class="block"></div>            <div id="block_1" class="block"></div>            <div id="block_2" class="block"></div>            <div id="block_3" class="block"></div>            <div id="block_4" class="block"></div>            <div id="block_5" class="block"></div>            <div id="block_6" class="block"></div>            <div id="block_7" class="block"></div>            <div id="block_8" class="block"></div>          </div>这是我将 X 和 O 放在 div 上的代码：boxes.addEventListener('click', e =>{                //dispalay x and o.        move++;                if (turn % 2 === 1){                    event.target.innerHTML = activePlayer1;                    turn++;                }else{                    event.target.innerHTML = activePlayer2;                    turn--;                }    })现在我想使用以下代码清除 div 类块中的值：refreshbtn.addEventListener('click', e =>{             document.querySelector('.block').innerHTML = '';    })但这似乎不起作用。:(

Answer 1

你需要querySelectorAll而不是querySelector. 由于您要更改多个元素。然后使用循环更改每个项目

const refreshbtn = document.querySelector("button");

const blocks = document.querySelectorAll(".block");

refreshbtn.addEventListener('click', e => {

  blocks.forEach(block => {

    block.innerHTML = "";

  });

})

<div class="block">A</div>

<div class="block">B</div>

<div class="block">C</div>

<div class="block">D</div>

<div class="block">E</div>

<button>Refresh</button>

Answer 2

document.querySelector('.block')只返回类块的第一个元素，所以很明显只有id 为 block_0的 div