web-dev-qa-db-fra.com

Comment réparer: "TypeError: impossible de lire la propriété" AddeventListener "de NULL" ...? //

Im apprentissage HTML/CSS/JS à partir d'un tutoriel vidéo. J'apprends à écrire un code JS et je ne peux pas m'empêcher de résoudre un problème. J'espère que vous me donnerez la solution les gars. Le problème concerne Add.EventListener. Lorsque j'exécute le code de Chrome, dans la console, il affiche: "App.js: 11 non capturé TypeError: Impossible de lire la propriété" AddeventListener "de NULL" J'espère résoudre ce problème avec votre aide. Merci!

const computerScore = 0;
const userScore_span = document.getElementById("user-score");
const computerScore_span = document.getElementById("computer-score");
const scoreBoard_div = document.querySelector(".score-board");
const result_div = document.querySelector(".result");
const p_div = document.getElementById("p");
const r_div = document.getElementById("r");
const s_div = document.getElementById("s");

p_div.addEventListener('click', function(){
    console.log("hey you clicked p")
})

Ceci est le code Javescript - ci-dessous sera le code HTML pour voir les erreurs ...

<html>
    <head>
        <meta charset="utf-8">
        <title>Rock Paper Sicssors Game</title>
        <link href="style.css" rel="stylesheet" type="text/css">
        <script type="text/javascript"  src="app.js" charset="utf-8"></script>
    </head>
    <body>
        <header>
            <h1>Rock Paper Sicssors</h1>
        </header>

        <div class="score-board">
            <div id="user-label" class="badge">user</div>
            <div id="computer-label" class="badge">comp</div>
            <span id="user-score">0</span>:<span id="computer-score">0</span>
        </div>

        <div class="result">
            <p>Paper covers rock. You win!</p>
        </div>

        <div class="choices">
            <div class="choice" id="p">
                <img src="game.image/paper-img.jpg" alt="image" height="42" width="42">
            </div>
        </div>
        <div class="choices">
                <div class="choice" id="r">
                    <img src="game.image/rock-img.jpg" alt="image" height="42" width="42">
                </div>
            </div>
        <div class="choices">
                    <div class="choice" id="s">
                        <img src="game.image/siccsors-img.jpg" alt="image" height="42" width="42">
                    </div>
                </div>


                <p1 id="action-message">Make your move.</p1>

     </body>
</html>
javascripthtmladdeventlistener
4
M.Margjini

L'erreur est que votre JavaScript est exécuté avant que le DOM ait été chargé, alors document.getElementById() renvoie undefined (cela peut se produire si votre <script> tag est dans le document <head>)

Vous pourriez:

  • bouger ton <script> tag à la fin du document <body>,

  • ou vous pouvez envelopper votre contexte JavaScript dans une fonction qui écoute pour que le DOM soit chargé avant d'exécuter.

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      // - Code to execute when all DOM content is loaded. 
  });
</script>

si vous utilisez déjà JQuery (ce qui pourrait ne pas être dans ce cas puisque vous faites un didacticiel vidéo):

$(document).ready(function() { /* code here */ });

vous pouvez trouver plus d'exemples d'événements surcharger dans ce message: window.onload vs document.onload

1
mwelche

Vous pouvez également ajouter le mot reporer à votre étiquette de script

<script type="text/javascript"  src="app.js" charset="utf-8" defer></script>

Cela signifie que le navigateur chargera votre fichier JavaScript mais ne l'exécutera pas avant que votre HTML n'ait été téléchargé.

0
Hike