0

嗨，尝试在简单的 tictactoe 上学习 Javascript。井字游戏正在工作。尝试使用 mouseenter 添加预览图像功能。当我做一个正方形时，效果很好。当我尝试遍历所有方块时，我得到了 Uncaught TypeError: Cannot set property 'src' of 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";
            }
        })
    }
}
4

2 回答 2

0

谢谢Сергей Петрашко - 这工作

// 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";
        });
    }
}
于 2020-07-09T13:28:07.893 回答
0

setNewImage当 dom 加载了onload属性时，您只需运行您的函数就可以了，您还可以直接在 HTML 中设置事件两次，在函数中设置mouseenter另一次。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>

于 2020-07-09T13:15:46.977 回答