我可以通过重启按钮改变我的井字游戏的innerHTML，但一旦我重启，我不能重新分配再次开始游戏 &

Question

我不能重新分配我的值一旦我点击它们并点击重启。这意味着如果我将X或O放入其中一个井字盒中并点击重新启动，那么我在上一款游戏中没有点击的其他盒子就可以玩了，但我在上一款游戏中点击的盒子将不会显示值。如有任何帮助，不胜感激。

代码:

const turn = document.getElementById('turn');
const restart = document.getElementById('restart');
const cells = document.querySelectorAll('[data-index]');
let count = 1;
document.querySelector('.board').addEventListener('click', which);
function which(event) {
console.log(`Index ${event.target.dataset.index} got clicked!`);
if (count % 2 == 1 && event.target.classList.contains('unselected')) {
count++
event.target.innerHTML = '<i class="fas fa-times"></i>';
turn.innerHTML = "O Player's Turn";
event.target.classList.remove('unselected');
event.target.classList.remove('selectedX');
}
if (count % 2 == 0 && event.target.classList.contains('unselected')) {
count++
event.target.innerHTML = '<i class="far fa-circle"></i>';
turn.innerHTML = "X Player's Turn";
event.target.classList.remove('unselected');
event.target.classList.remove('selectedO');
}
}
restart.addEventListener('click', newGame);
function newGame() {
turn.innerHTML = "X Player's Turn";
cells.forEach(e => {
e.innerHTML = '';
})
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
crossorigin="anonymous" />

<header>
<h1>Tic Tac Toe</h1>
</header>
<div class="turn" id='turn'>X Player's Turn</div>
<div class="board" id='board'>
<div class="box unselected" data-index='0'></div>
<div class="box unselected" data-index='1'></div>
<div class="box unselected" data-index='2'></div>
<div class="box unselected" data-index='3'></div>
<div class="box unselected" data-index='4'></div>
<div class="box unselected" data-index='5'></div>
<div class="box unselected" data-index='6'></div>
<div class="box unselected" data-index='7'></div>
<div class="box unselected" data-index='8'></div>
</div>
<div class="btn">
<button class="restart" id="restart">Restart</button>
</div>

Answer 1

const turn = document.getElementById('turn');
const restart = document.getElementById('restart');
const cells = document.querySelectorAll('[data-index]');
let count = 1;
document.querySelector('.board').addEventListener('click', which);
function which(event) {
console.log(`Index ${event.target.dataset.index} got clicked!`);
if (count % 2 == 1 && event.target.classList.contains('unselected')) {
count++
event.target.innerHTML = '<i class="fas fa-times"></i>';
turn.innerHTML = "O Player's Turn";
event.target.classList.remove('unselected');
event.target.classList.remove('selectedX');
}
if (count % 2 == 0 && event.target.classList.contains('unselected')) {
count++
event.target.innerHTML = '<i class="far fa-circle"></i>';
turn.innerHTML = "X Player's Turn";
event.target.classList.remove('unselected');
event.target.classList.remove('selectedO');
}
}
restart.addEventListener('click', newGame);
function newGame() {
turn.innerHTML = "X Player's Turn";
cells.forEach(e => {
e.innerHTML = '';
e.classList.remove("selectedO","selectedX");
e.classList.add("unselected");
})
}

.board {width:120px}
.box {display:inline-block;
width:30px; height:30px;
border: 1px solid gray; text-align:center}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>

<header>
<h1>Tic Tac Toe</h1>
</header>
<div class="turn" id='turn'>X Player's Turn</div>
<div class="board" id='board'>
<div class="box unselected" data-index='0'></div>
<div class="box unselected" data-index='1'></div>
<div class="box unselected" data-index='2'></div>
<div class="box unselected" data-index='3'></div>
<div class="box unselected" data-index='4'></div>
<div class="box unselected" data-index='5'></div>
<div class="box unselected" data-index='6'></div>
<div class="box unselected" data-index='7'></div>
<div class="box unselected" data-index='8'></div>
</div>
<div class="btn">
<button class="restart" id="restart">Restart</button>
</div>

除了添加一点(太少…)CSS的东西，我添加以下行到您的restart()函数:

e.classList.remove("selectedO","selectedX");
e.classList.add("unselected");

这些是使单元格再次可单击所必需的。或者，我也可以用

实现相同的效果

e.className="box unselected";

Answer 2

原因:您删除了类'unselected'，因此它不会进入功能which的2if部分

你可以直接检查它的值(检查value是否为空)