时间戳

首页 > 解决方案 > 我收到“未捕获的 TypeError：无法读取属性 'addEventListener' of null”，不太清楚为什么

javascript - 我收到“未捕获的 TypeError：无法读取属性 'addEventListener' of null”，不太清楚为什么

问题描述

所以我正在使用 html/css 和 javascript 制作一个基本的井字游戏应用程序，但是，我不断收到此错误“script.js:13 Uncaught TypeError: Cannot read property 'addEventListener' of null at playBtn (script.js:13 ) 在 HTMLDocument. (script.js:8)"。我搜索的所有地方都说这是因为我的 javascript 是在我的 DOM 之前加载的，所以我将我的 javascript 包装在 document.addEventListener("DOMContentLoaded", function (event) {} function 但我仍然收到此错误。帮助会很多赞赏。在下面添加了 html 和 js 代码。ps. html/css/js 仍然是新的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule="" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.js"></script>
    <link rel="stylesheet" href="resources/css/style.css">
    <title>Tic Tac Toe</title>

</head>

<body>
    <!--row 1 -->
    <h1>Tic Tac Toe</h1>
    <div class="container">
        <div class="player1-text">
            <h2>Player 1</h2>
        </div>
        <div class="game-container">
            <div class="tile-1">
                <ion-icon name="close-outline"></ion-icon>
                <ion-icon name="ellipse-outline"></ion-icon>
            </div>
            <div class="tile-2">
                <ion-icon name="close-outline"></ion-icon>
                <ion-icon name="ellipse-outline"></ion-icon>
            </div>
            <div class="tile-3">
                <ion-icon name="close-outline"></ion-icon>
                <ion-icon name="ellipse-outline"></ion-icon>
            </div>
            <!--row 2 -->
            <div class="tile-4">
                <ion-icon name="close-outline"></ion-icon>
                <ion-icon name="ellipse-outline"></ion-icon>
            </div>
            <div class="tile-5">
                <ion-icon name="close-outline"></ion-icon>
                <ion-icon name="ellipse-outline"></ion-icon>
            </div>
            <div class="tile-6">
                <ion-icon name="close-outline"></ion-icon>
                <ion-icon name="ellipse-outline"></ion-icon>
            </div>
            <!--row 3 -->
            <div class="tile-7">
                <ion-icon name="close-outline"></ion-icon>
                <ion-icon name="ellipse-outline"></ion-icon>
            </div>
            <div class="tile-8">
                <ion-icon name="close-outline"></ion-icon>
                <ion-icon name="ellipse-outline"></ion-icon>
            </div>
            <div class="tile-9">
                <ion-icon name="close-outline"></ion-icon>
                <ion-icon name="ellipse-outline"></ion-icon>
            </div>
        </div>
        <div class="player2-text">
            <h2>Player 2</h2>
        </div>
    </div>
    <div>
        <button class="play-btn">
            Play game
        </button>
    </div>

    <script src="resources/js/script.js"></script>

</body></html>




document.addEventListener("DOMContentLoaded", function (event) {

    var activePlayer, gamePlaying;
    var p1Checks, p2Checks;
    var playButton = document.querySelector('play-btn');

    init();
    playBtn();


    function playBtn() {

        playButton.addEventListener('click', function () {
            gamePlaying = true;
            activePlayer = 1;

            for (var i = 1; i < 10; i++) {
                clickTiles(i);
            }

        });

    }

    function clickTiles(i) {
        document.querySelector('.tile-' + i).addEventListener('click', function () {

            if (activePlayer === 1) {
                document.querySelector('.tile-' + i).classList.add('p1-t' + i);
                p1Checks[i - 1] = 1;
                checkP1Win();
            } else {
                document.querySelector('.tile-' + i).classList.add('p2-t' + i);
                p2Checks[i - 1] = 1;
                checkP2Win();
            }

            document.querySelector('.tile-' + i).classList.add('clicked');
            nextPlayer();
        });
    }

    function nextPlayer() {
        if (activePlayer === 1) {
            activePlayer = 2;
        } else {
            activePlayer = 1;
        }

        for (var i = 1; i < 10; i++) {
            if (activePlayer === 2) {
                document.querySelector('.tile-' + i).classList.remove('player-1');
                document.querySelector('.tile-' + i).classList.add('player-2');
            } else {
                document.querySelector('.tile-' + i).classList.remove('player-2');
                document.querySelector('.tile-' + i).classList.add('player-1');
            }
        }
    }

    function init() {
        //initialise evrything here 
        gamePlaying = false;
        p1Checks = [0, 0, 0, 0, 0, 0, 0, 0, 0];
        p2Checks = [0, 0, 0, 0, 0, 0, 0, 0, 0];

        for (var i = 1; i < 10; i++) {
            document.querySelector('.tile-' + i).classList.remove('player-1');
            document.querySelector('.tile-' + i).classList.remove('player-2');
            document.querySelector('.tile-' + i).classList.remove('p1-t' + i);
            document.querySelector('.tile-' + i).classList.remove('p2-t' + i);
        }


    }

    function checkP1Win() {
        //all possible win conditions
        if (p1Checks[0] == 1 && p1Checks[1] == 1 && p1Checks[2] == 1) {
            alert("Player 1 wins!");
        } else if (p1Checks[0] === 1 && p1Checks[3] === 1 && p1Checks[6] === 1) {
            alert("Player 1 wins!");
        } else if (p1Checks[0] === 1 && p1Checks[4] === 1 && p1Checks[8] === 1) {
            alert("Player 1 wins!");
        } else if (p1Checks[1] === 1 && p1Checks[4] === 1 && p1Checks[7] === 1) {
            alert("Player 1 wins!");
        } else if (p1Checks[2] === 1 && p1Checks[4] === 1 && p1Checks[6] === 1) {
            alert("Player 1 wins!");
        } else if (p1Checks[2] === 1 && p1Checks[5] === 1 && p1Checks[8] === 1) {
            alert("Player 1 wins!");
        } else if (p1Checks[3] === 1 && p1Checks[4] === 1 && p1Checks[5] === 1) {
            alert("Player 1 wins!");
        } else if (p1Checks[6] === 1 && p1Checks[7] === 1 && p1Checks[8] === 1) {
            alert("Player 1 wins!");
        }
    }

    function checkP2Win() {
        //all possible win conditions
        if (p2Checks[0] == 1 && p2Checks[1] == 1 && p2Checks[2] == 1) {
            alert("Player 2 wins!");
        } else if (p2Checks[0] === 1 && p2Checks[3] === 1 && p2Checks[6] === 1) {
            alert("Player 2 wins!");
        } else if (p2Checks[0] === 1 && p2Checks[4] === 1 && p2Checks[8] === 1) {
            alert("Player 2 wins!");
        } else if (p2Checks[1] === 1 && p2Checks[4] === 1 && p2Checks[7] === 1) {
            alert("Player 2 wins!");
        } else if (p2Checks[2] === 1 && p2Checks[4] === 1 && p2Checks[6] === 1) {
            alert("Player 2 wins!");
        } else if (p2Checks[2] === 1 && p2Checks[5] === 1 && p2Checks[8] === 1) {
            alert("Player 2 wins!");
        } else if (p2Checks[3] === 1 && p2Checks[4] === 1 && p2Checks[5] === 1) {
            alert("Player 2 wins!");
        } else if (p2Checks[6] === 1 && p2Checks[7] === 1 && p2Checks[8] === 1) {
            alert("Player 2 wins!");
        }
    }



    function playerWins() {
        //add code here to make all the tiles unclickable and then display who won 
    }

    function playAgainBtn() {
        //button to initialise evrything when pressed 
    }


});

标签： javascripthtml

解决方案

推荐阅读