井字游戏如何根据图像变量而不是字符串输入获胜

Question

我在运行 checkForWinner 函数时遇到一些问题。我已经将 document.turn 设置为图像变量，但是在我将 square.innerHTML 内的内容更改为图像后，checkForWinner 函数无法识别我的移动。我该如何解决这个问题？我需要设置全局变量吗？ 谢谢！

<div class="toegrid">
<div>
</div>
<div class="detailtoegrid">
<div>
<div class="box" id= "s1" onclick="nextMove(this)"></div>
<div class="box" id= "s2" onclick="nextMove(this)"></div>
<div class="box" id= "s3" onclick="nextMove(this)"></div>
</div>
<div>
<div class="box" id= "s4" onclick="nextMove(this)"></div>
<div class="box" id= "s5" onclick="nextMove(this)"></div>
<div class="box" id= "s6" onclick="nextMove(this)"></div>
</div>
<div>
<div class="box" id= "s7" onclick="nextMove(this)"></div>
<div class="box" id= "s8" onclick="nextMove(this)"></div>
<div class="box" id= "s9" onclick="nextMove(this)"></div>
</div> 
</div>        
<div>
</div>   
</div>

Javascript：

function choosebkgdX(){
for (var i=1; i <= 9; i++) {
clearBox(i);
}
document.turn ='<img src = "images/boardx.png">';
}
function choosebkgdO(){
for (var i=1; i <= 9; i++) {
clearBox(i);
}
document.turn = '<img src = "images/boardo.png">';
}
function nextMove(square) {
if (document.turn==="X") {
// if (document.turn==='<img src = "images/boardx.png">'){
//  square.innerHTML = "X";
square.innerHTML = '<img src = "images/boardx.png">';
} else {
// square.innerHTML = "O";
square.innerHTML = '<img src = "images/boardo.png">';
} switchTurn();
}
function switchTurn(){
if(checkForWinner(document.turn)) {
alert("You Won!");
} else if (document.turn == 'X') {   
// } else if (document.turn == '<images/boardx.png">') {   
// document.turn = 'O';
document.turn = '<img src = "images/boardo.png">';
} else {
document.turn = "X";
//  document.turn = '<images/boardx.png">';
}
}
function checkForWinner (move) {
var result = false;
if (checkRow(1, 2, 3, move)|| 
checkRow(4, 5, 6, move)||
checkRow(7, 8, 9, move)||
checkRow(1, 4, 7, move)||
checkRow(2, 5, 8, move)||
checkRow(3, 6, 9, move)||
checkRow(1, 5, 9, move)||
checkRow(3, 5, 7, move)) {
result = true;
}
return result;
}
function checkRow(a, b, c, move){
var result = false;
if (getBox(a) == move && getBox(b) == move && getBox(c) == move){
result = true;
}
return result;
}
function getBox(number){
return document.getElementById('s' + number).innerHTML;
}
function clearBox() {
for (var i=1; i <= 9; i++) {
document.getElementById('s' + i).innerHTML = "";
}
}

Answer 1

// Don't set up your events with HTML attributes.
// Do all JavaScript work separate from HTML and
// you see how much redudant code you can get rid of
document.querySelector("div.detailtoegrid").addEventListener("click", nextMove);
// You never declare document.turn and you really shouldn't
// be adding new properties to the document object in the first place.
// Instead create a variable and initialize it as the game starts.
let turn = "X"; 
function choosebkgdX(){
for (var i=1; i <= 9; i++) {
clearBox(i);
}
turn ='X';
}
function choosebkgdO(){
for (var i=1; i <= 9; i++) {
clearBox(i);
}
turn = 'O';
}
function nextMove(event) {
if (turn==="X") {
event.target.innerHTML = '<img src = "images/boardx.png">';
} else {
event.target.innerHTML = '<img src = "images/boardo.png">';
}
switchTurn();
}
function switchTurn(){
if(checkForWinner(turn)) {
alert("You Won!");
} else if (turn == 'X') {   
turn = 'O';
} else {
turn = "X";
}
}
function checkForWinner(move) {
console.log(move);
var result = false;
if (checkRow(1, 2, 3, move)|| checkRow(4, 5, 6, move)||
checkRow(7, 8, 9, move)|| checkRow(1, 4, 7, move)||
checkRow(2, 5, 8, move)|| checkRow(3, 6, 9, move)||
checkRow(1, 5, 9, move)|| checkRow(3, 5, 7, move)) {
result = true;
}
return result;
}
function checkRow(a, b, c, move){
var result = false;
if (getBox(a) == move && getBox(b) == move && getBox(c) == move){
result = true;
}
return result;
}
function getBox(number){
return document.getElementById('s' + number).innerHTML;
}
function clearBox() {
for (var i=1; i <= 9; i++) {
document.getElementById('s' + i).innerHTML = "";
}
}

div.box {
display:inline-block;
margin:2px;
height:40px;
width: 40px;
background-color:#e0e0e0;
}
img {
width:30px;
height:30px;
}

<div class="toegrid">
<div></div>
<div class="detailtoegrid">
<div>
<div class="box" id="s1"></div>
<div class="box" id="s2"></div>
<div class="box" id="s3"></div>
</div>
<div>
<div class="box" id="s4"></div>
<div class="box" id="s5"></div>
<div class="box" id="s6"></div>
</div>
<div>
<div class="box" id="s7"></div>
<div class="box" id="s8"></div>
<div class="box" id="s9"></div>
</div> 
</div>        
<div></div>   
</div>