J'essaie de faire une partie dans laquelle un carré vert apparaît dans un endroit aléatoire pendant 2 secondes puis disparaît et lance à nouveau dans un endroit différent. Si l'utilisateur clique sur le carré vert, ils reçoivent un point. Quand ils cliquent sur une place blanche, ils perdent une vie.
Je ne sais pas comment récupérer le carré vert dans mon code JavaScript. Je pensais que je donnerais la classe verte de la classe carrée ... Mais malheureusement, cela ne fonctionne pas. P> Savez-vous pourquoi? Comment puis-je le faire? P> Vous pouvez voir comment le jeu regarde ici: HTTPS: / /zylka44.github.io/reflex/ p> ... et entier script.js ici: https://github.com/zylka44/reflex/blob/master/script.js p> p> et la classe de carrés blancs code> blanc code>, puis faites quelque chose comme ça: p>
<div id="header">
<div id="counterbox" class="box_in_header">
<div class="counter">Lifes:
<div id="lifes">3</div>
</div>
<div class="counter">Points:
<div id="points">0</div>
</div>
</div>
<div class="box_in_header bold">REFLEX</div>
<div class="box_in_header">Time:
<div id="time">60</div> sek</div>
</div>
<!--plansza-->
<div id="container">
<!--alert-->
<div id="alert">Catch the green square!</div>
<!--kwadraty-->
<div id="board"></div>
<div id="game_over"></div>
<!--start i reset-->
<div id="start-reset">
<div id="start">Start</div>
<div id="reset">Reset</div>
</div>
</div>
3 Réponses :
Vous devez faire boucler les éléments et ajouter les gestionnaires d'événements individuellement.
Array.from(document.getElementsByClassName('white')).forEach(ele=>ele.onclick(() => {
//user loses a life
});
Je n'ai pas voté pour ne pas soutenir IE. J'ai voté pour une boucle inélégante sur tous les éléments lorsque vous pouvez déléguer
allElementsWithClass.forEach(element=>{element.onclick(()=>{/* user loses a life here*/})})
getelementsbyclassname n'est pas une méthode. getelementsbyclassname Toutefois, retourne et htmlCollection, pas une nodéliste, qui ne met pas en œuvre foreach .
J'ai écrit const Squares = document.getelementsbyclassname ("blanc"); const FirstElement = carrés [0]; firstelement.onclick ((() => {console.log ('ok')}); mais je reçois> firstelement.onclick n'est pas une fonction <
Utiliser Event.Target and Écouter le clic sur la carte
<div id="header">
<div id="counterbox" class="box_in_header">
<div class="counter">Lifes:
<div id="lifes">3</div>
</div>
<div class="counter">Points:
<div id="points">0</div>
</div>
</div>
<div class="box_in_header bold">REFLEX</div>
<div class="box_in_header">Time:
<div id="time">60</div> sek</div>
</div>
<!--plansza-->
<div id="container">
<!--alert-->
<div id="alert">Catch the green square!</div>
<!--kwadraty-->
<div id="board"></div>
<div id="game_over"></div>
<!--start i reset-->
<div id="start-reset">
<div id="start">Start</div>
<div id="reset">Reset</div>
</div>
</div>
document.getElementyID ('blanc') n'est pas le même que getelementsbyclassname. Il me semble que vous apprenez JS et vous devez bien consulter les options que vous devez sélectionner des éléments:document.QuerySelectorallall () est quelque chose que vous pouvez utiliser.Désolé, j'ai fait erreur, j'ai pensé à getelementsbyclassname mais j'ai écrit mal