Uncaught TypeError: Невозможно установить свойство sr c нулевого значения - простой tictactoe - PullRequest
Новая
       23

Uncaught TypeError: Невозможно установить свойство sr c нулевого значения - простой tictactoe

0 голосов
/ 09 июля 2020

Привет, пытаюсь выучить Javascript на простых тиктоэ. TicTacToe работает. Попытка добавить функцию предварительного просмотра изображения с помощью mouseenter. Когда я делаю один квадрат, работает нормально. когда я пытаюсь пройти l oop через все квадраты, я получаю Uncaught TypeError: Cannot set property 'sr c' of null. Кажется, что-то простое не так, но я не могу этого заметить. Также не уверен, есть ли лучший способ, чем использовать для l oop. Похоже, я просто смогу создать слушателя, который не должен каждый раз проходить l oop через все идентификаторы. Выложить всего Javascript для mouseon. Заранее благодарим за любую помощь.

html

image

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

Ответы [ 2 ]

0 голосов
/ 09 июля 2020

Спасибо Сергей Петрашко - это сработало 

// 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";
        });
    }
}
0 голосов
/ 09 июля 2020

Вам просто нужно запустить свою функцию setNewImage, когда dom загружен с атрибутом 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>
...