Question

您好尝试在简单的tictactoe上学习Javascript。 TicTacToe正在工作。尝试使用mouseenter添加预览图像功能。当我做一个正方形时，效果很好。当我尝试遍历所有正方形时，我遇到了Uncaught TypeError：无法将属性'src'设置为null的情况。似乎简单的事情是错误的，但我无法发现它。也不确定是否有比使用for循环更好的方法。似乎我应该能够创建一个不必每次都遍历所有id的侦听器。仅发布用于mouseon的Javascript。预先感谢您的帮助。

html

<!DOCTYPE html>

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Replace this with your own information -->
    <meta name="author" content="" />
    <title>TicTacToe Potential Solution</title>
    <link rel="stylesheet" href="tictactoe_style.css" type="text/css">
    <script src="mouseOn.js" defer></script>

    <!--  onclick="playerGame()"  onmouseenter="setNewImage()" onmouseleave="setOldImage()"  -->

  </head>

  <body>
  <h1> TicTacToe </h1>

    <table>

      <tr>

        <td>

          <img id="1" onmouseenter="setNewImage()" src="blank.jpg" alt="starting image of Chichen Itza"/>

        </td>

        <td>

          <img id="2" onmouseenter="setNewImage()" src="blank.jpg" alt="starting image of Chichen Itza"/>

        </td>

        <td>

          <img id="3" onmouseenter="setNewImage()" src="blank.jpg" alt="starting image of Chichen Itza"/>

        </td>

      </tr>

      <tr>

        <td>

          <img id="4" onmouseenter="setNewImage()" src="blank.jpg" alt="starting image of Chichen Itza"/>

        </td>

        <td>

          <img id="5" onmouseenter="setNewImage()" src="blank.jpg" alt="starting image of Chichen Itza"/>
          
        </td>

        <td>

          <img id="6" onmouseenter="setNewImage()" src="blank.jpg" alt="starting image of Chichen Itza"/>

        </td>

      </tr>

      <tr>

        <td>

          <img id="7" onmouseenter="setNewImage()" src="blank.jpg" alt="starting image of Chichen Itza"/>

        </td>

        <td>

          <img id="8" onmouseenter="setNewImage()" src="blank.jpg" alt="starting image of Chichen Itza"/>

        </td>

        <td>

          <img id="9" onmouseenter="setNewImage()" src="blank.jpg" alt="starting image of Chichen Itza"/>

        </td>

      </tr>

    </table>

    <h2></h2>
        
    <div class="scoreboard">
        <h3  id="demo"></h3>
        <p></p>

        <button id="reset">Reset</button>
    </div>

  </body>

</html>

JavaScript // jshint esversion：6

//Sets the number of boxes to a constant
//creats an Global immutable constant variable.  
const boxes = document.querySelectorAll("img");


//stores player turn Global variable currentPlayer
let currentPlayer = "cross.png";

function setNewImage() {
    
for (const box of boxes) {  
    //adding mouse on event listener
    box.addEventListener("mouseenter", () => {
        if (currentPlayer == "cross.png") {
            document.getElementById(box).src="cross1.png";
        }
        else {
            document.getElementById(box).src="zero1.png";
            }
        })
    }
}

Answer 1

当dom加载了setNewImage属性时，您只需运行onload函数，就可以了，也可以直接设置两次mouseenter事件两次在HTML中使用setNewImage函数。

这是代码：

//Sets the number of boxes to a constant
//creats an Global immutable constant variable.  
const boxes = document.querySelectorAll("img");


//stores player turn Global variable currentPlayer
let currentPlayer = "cross.png";

function setNewImage() {

  for (const box of boxes) {
    //adding mouse on event listener
    box.addEventListener("mouseenter", () => {
      if (currentPlayer === "cross.png") {
        box.src = "https://2.bp.blogspot.com/-44FEkFGb5h8/Ux3Ul5ly3LI/AAAAAAAAEGU/jl4_ktKNJp0/s1600/playX.png";
      } else {
        box.src = "https://1.bp.blogspot.com/-lyELSi3oPWc/Ux3UlhpiAWI/AAAAAAAAEGI/VLvmMCW7aco/s1600/playO.png";
      }
    });
  }
}

function reset(){
  for (const box of boxes) {
    box.src = "";
  }
}

<!DOCTYPE html>

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Replace this with your own information -->
    <meta name="author" content="" />
    <title>TicTacToe Potential Solution</title>
    <link rel="stylesheet" href="tictactoe_style.css" type="text/css">
    <script src="mouseOn.js" defer></script>

    <!--  onclick="playerGame()"  onmouseenter="setNewImage()" onmouseleave="setOldImage()"  -->

  </head>

  <body onload="setNewImage()">
    <h1> TicTacToe </h1>

    <table>

      <tr>

        <td>

          <img id="1" width="100" height="100" />

        </td>

        <td>

          <img id="2" width="100" height="100" />

        </td>

        <td>

          <img id="3" width="100" height="100" />

        </td>

      </tr>

      <tr>

        <td>

          <img id="4" width="100" height="100" />

        </td>

        <td>

          <img id="5" width="100" height="100" />

        </td>

        <td>

          <img id="6" width="100" height="100" />

        </td>

      </tr>

      <tr>

        <td>

          <img id="7" width="100" height="100" />

        </td>

        <td>

          <img id="8" width="100" height="100" />

        </td>

        <td>

          <img id="9" width="100" height="100" />

        </td>

      </tr>

    </table>

    <h2></h2>

    <div class="scoreboard">
      <h3 id="demo"></h3>
      <p></p>

      <button id="reset" onclick="reset()">Reset</button>
    </div>

  </body>

</html>

Answer 2

感谢СергейПетрашко-可行

// jshint esversion: 6


//Sets the number of boxes to a constant
//creats an Global immutable constant variable.  
const boxes = document.querySelectorAll("img");


//stores player turn Global variable currentPlayer
let currentPlayer = "cross.png";


function setNewImage() {
    
    for (const box of boxes) {  
        //adding mouse on event listener
        box.addEventListener("mouseenter", () => {
            if (currentPlayer=="cross.png") {
                box.src="cross1.png";
            }
            else {
                box.src="zero1.png";
                }
            });
        }
}

function setOldImage() {
for (const box of boxes) {
        //adding mouse leave event listener
        box.addEventListener("mouseleave", () => {
            box.src="blank.jpg";
        });
    }
}

未捕获的TypeError：无法将属性'src'设置为null-简单的tictactoe

2 个答案: