Question

未捕获的类型错误：无法设置属性“src”为 null - 简单的井字游戏

2020-07-09

400

javascript for-loop mouselistener

嗨，我正在尝试学习有关简单井字棋的 Javascript。井字棋正在运行。尝试使用 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

您只需要运行 setNewImage 函数，当DOM加载带有 onload 属性时，它也很好，也可以设置 mouseEnter < /code>直接在HTML中进行两次事件，然后在 setNewimage 函数中另一个时间。

这是代码：

001730592

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";
        });
    }
}