Désolé d'avance si mon code est vraiment mauvais mais je ne suis qu'un débutant. Je voudrais créer un puzzle de recherche de mots à l'aide de boutons. Lorsque la personne a fini de trouver en cliquant sur tous les mots que je vais créer à partir des boutons, je veux qu'un message apparaisse indiquant qu'elle a terminé le puzzle. J'ai donc créé un exemple ici avec 4 boutons mais je n'arrive pas à faire fonctionner mon code. Je veux que le message apparaisse dans le conteneur div une fois que tous les boutons ont été cliqués. Suis-je sur la bonne voie ici ou loin? Toute idée serait tellement appréciée!
<html>
<p onclick="myFunction()" id="1" value=false >Button1</p>
<p onclick="myFunction()" id="2" value=false >Button2</p>
<p onclick="myFunction()" id="3" value=false >Button3</p>
<p onclick="myFunction()" id="4" value=false >Button4</p>
<div id="demo">Message displays here if all 4 buttons are clicked</div>
<script>
function myFunction(){
value = true;}
if(p 1){
value = true;}
if(p 2){
value = true;}
if(p 3){
value = true;}
if(p 4){
value = true;}
else{
document.getElementById("demo").innerHTML = "Congratulations you clicked on all of the buttons";}
}
</script>
</html>
4 Réponses :
Un moyen plus simple de le faire est d'utiliser un écouteur d'événement qui écoute chaque clic sur un bouton, puis rend la valeur de ce bouton vraie, puis vérifie tous les boutons pour voir s'ils ont tous été cliqués et si c'est le cas, affiche le message de félicitations.
HTML
ajout de classes à chaque bouton et suppression de la fonction onclick
window.addEventListener('click', (e)=>{
var bool = true
if (e.target.classList.contains('button')) {
e.target.setAttribute('value', "true")
}
buttons = document.querySelectorAll('.button')
for (let i = 0; i < buttons.length; i++) {
console.log(buttons[i].getAttribute('value'))
if (buttons[i].getAttribute('value') == "false") {
bool = false
}
}
if (bool == true) {
document.getElementById("demo").innerHTML = "Congratulations you clicked on all of the buttons";
}
})
JS
<html>
<p class='button' id="1" value=false >Button1</p>
<p class='button' id="2" value=false >Button2</p>
<p class='button' id="3" value=false >Button3</p>
<p class='button' id="4" value=false>Button4</p>
<div id="demo">Message displays here if all 4 buttons are clicked</div>
</html>
J'aime ça. Je devrai implémenter le code dans le programme d'animation que j'utilise pour créer le puzzle. Je pense donc que la façon dont vous avez mis cela en place fonctionnera pour moi, mais il faudra un peu de temps pour l'essayer. Merci beaucoup!
Je suggérerais ceci comme une réponse facile pour comprendre un peu mieux javascript et html:
HTML
var foundButtons = {
button1: false,
button2: false,
button3: false,
button4: false,
};
function myFunction(event) {
foundButtons[event.target.name] = true;
for (var button in foundButtons) {
if (foundButtons.hasOwnProperty(button)) {
if (!foundButtons[button]) {
return
}
}
}
document.getElementById("demo").innerHTML = "Congratulations you clicked on all of the buttons";
}
JS
<html>
<body>
<button onclick="myFunction(event)" name="button1">Button1</button>
<button onclick="myFunction(event)" name="button2">Button2</button>
<button onclick="myFunction(event)" name="button3">Button3</button>
<button onclick="myFunction(event)" name="button4">Button4</button>
<div id="demo">Message displays here if all 4 buttons are clicked</div>
</body>
</html>
Cela fait que vous avez un objet des boutons ou plutôt les mots sur lesquels il faut cliquer pour afficher le message. Désormais, lorsqu'un des boutons est cliqué, sa propriété est définie sur true. Ensuite, il itère sur les propriétés et termine la fonction avec une instruction de retour, s'il trouve une valeur fausse, ce qui signifie qu'il y a un bouton qui n'a pas été cliqué. Lorsque la fonction ne s'arrête pas, elle affiche le message de réussite.
Voici ma solution.
<p onclick="myFunction(0)">Button0</p> <p onclick="myFunction(1)">Button1</p> <p onclick="myFunction(2)">Button2</p> <p onclick="myFunction(3)">Button3</p> <div id="demo">Message displays here if all 4 buttons are clicked</div>
var set = []; //decalre an empty array
function myFunction(Id) {
console.log(Id); //the Id will be the vlaue from the button. For example button 1 has an Id of one as passed into by 'myFunction(1)
if (set.indexOf(Id) == -1) { //here we check to see if the Id number is in the array
set.push(Id); //if it's not in the array, we add it in
console.log(set);
console.log("length: " + set.length);
if (set.length > 3) { //if the lengthof the array is greater than three, all 4 buttons have been clicked.
document.getElementById("demo").innerHTML = "Congratulations you clicked on all of the buttons";
}
}
}Une si belle option. Merci!
pas de problème :) Je ne pense pas que vous obtiendrez plus de réponses que 4, donc vous devriez en marquer une comme correcte (il n'est pas nécessaire que ce soit moi, au fait, je pense que toutes ces réponses sont de bonnes options).
Vous pouvez utiliser les attributs de données des boutons pour conserver leur état . (Remarque: pour un projet plus complexe, vous ne voulez probablement pas faire cela)
De plus, mettre JS en ligne comme onclick="myfunction()" est quelque peu mauvais pour votre code - cela encourage les globaux et rend la logique JS plus difficile à suivre. Donc, j'ai montré une alternative en utilisant un IIFE , .querySelectorAll() et .addEventListener() :
<button class="js-button">Button1</button> <button class="js-button">Button2</button> <button class="js-button">Button3</button> <button class="js-button">Button4</button> <p class="js-message">Message displays here if all 4 buttons are clicked</p>
// IIFE to keep variables out of the global scope
;(function () {
// NOTE: These are more flexible when they are arrays (thus, Array.from())
var btnEls = Array.from(document.querySelectorAll('.js-button'))
var msgEls = Array.from(document.querySelectorAll('.js-message'))
function handleButtonClick(event) {
var btnEl = event.target
btnEl.disabled = true // optional
btnEl.dataset.toggled = 'true' // using the DOM to hold data
if (btnEls.some(function (el) {
return el.dataset.toggled !== 'true'
})) return
msgEls.forEach(function (el) {
el.textContent = 'Congratulations you clicked on all of the buttons'
})
}
// Our "onclick" equivalent
btnEls.forEach(function (el) {
el.addEventListener('click', handleButtonClick)
})
})()... Il y a probablement beaucoup de syntaxe que vous ne connaissez pas, mais cet exemple devrait être utile pour ceux qui apprennent à partir d'une source plus moderne. Puisque vous apprenez de quelque chose qui utilise une syntaxe JS plus ancienne, voici un code JS plus ancien qui fonctionne à peu près de la même manière (mais qui n'est pas aussi facile à maintenir):
<button class="js-button">Button1</button> <button class="js-button">Button2</button> <button class="js-button">Button3</button> <button class="js-button">Button4</button> <p class="js-message">Message displays here if all 4 buttons are clicked</p>
// IIFE to keep variables out of the global scope
;(() => {
// NOTE: These are more flexible when they are arrays (thus, Array.from())
const btnEls = Array.from(document.querySelectorAll('.js-button'))
const msgEls = Array.from(document.querySelectorAll('.js-message'))
const handleButtonClick = ({ target: btnEl }) => {
btnEl.disabled = true // optional
btnEl.dataset.toggled = 'true' // using the DOM to hold data
if (btnEls.some(el => el.dataset.toggled !== 'true')) return
msgEls.forEach(el => {
el.textContent = 'Congratulations you clicked on all of the buttons'
})
}
// Our "onclick" equivalent
btnEls.forEach(el => el.addEventListener('click', handleButtonClick))
})()
Votre fonction se termine immédiatement après votre première
value = true;lorsque vous fermez les accolades. Vos instructions if ne sont même pas dans la fonction. Je pense que vous voulez ajouter la déclaration de vos accolades entre les parenthèsesmyFunction(value=true) {...}. Ensuite, vous devrez définirp. Et probablement utiliser==pour vérifier sa valeur:if (p == 1){...}Mais vous ne comparez pas non plus lavalueà quoi que ce soit, alors quel est son but?ouais j'ai beaucoup à apprendre. Merci d'avoir expliqué. Appréciez-le!