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

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>

Answer 2

我认为问题是您的图片正在阻止div的指针事件。您可以通过向图像添加属性来解决此问题。

这里有两个可能的解决方法

1. 向图像添加属性pointer-events: none（可能是最简单的）
2. 将onclick功能从div移至image

示例

square.innerHTML = '<img src = "images/boardx.png" onclick = \"imageClicked(this)\">';square.innerHTML = '<img src = "images/boardx.png" style = \"pointer-events: none\">';

为了允许在字符串中使用引号，请使用\"代替"

我对javascript很陌生，但是希望它可以正常工作。