如何清除 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 => {&nbsp; blocks.forEach(block => {&nbsp; &nbsp; block.innerHTML = "";&nbsp; });})<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