Je crée un jeu qui implique des nombres. L'idée est simple, si je clique sur un nombre (de 1 à 6) et que mon code en choisit un au hasard (également de 1 à 6). Si mon choix (onclick) est égal au choix de cpu, le jeu sera terminé! S'ils sont tous les deux des nombres improbables, mon score s'additionne!

Maintenant, la question est, si je clique sur "1" ou "2" .. (et ainsi de suite) j'ai besoin d'une toute nouvelle fonction pour tous les nombres.

Le code ressemble à ceci,

<button id="runs" onclick="i0()">0</button>
<button id="runs" onclick="i1()">1</button>
<button id="runs" onclick="i2()">2</button>
<button id="runs" onclick="i3()">3</button>
<button id="runs" onclick="i4()">4</button>
<button id="runs" onclick="i5()">5</button>
<button id="runs" onclick="i6()">6</button>

Je devrais écrire chaque fonction à plusieurs reprises, ce qui est presque le même! Comment puis-je utiliser à la place des paramètres qui n'impliquent qu'une seule fonction. Et comment puis-je ajouter une instruction "si" dans laquelle la condition doit indiquer que j'ai cliqué sur "1" .etc

Comme,

if(Clicked one//for example) {
    document.getElementById("someId").innerHTML = "You pressed one";//:ex
}

Puis-je utiliser,

function click(i0, i1, i2//etc)
if(i0 == true) {
    //some code
}

N'oubliez pas! Je dois utiliser des paramètres (je suis nouveau sur JavaScript).

1
Mukunth 16 avril 2018 à 18:08

3 réponses

Meilleure réponse

Tout d'abord, vous ne devez pas configurer vos gestionnaires d'événements avec des attributs d'événement HTML car cette technique a plus de 20 ans et a de nombreuses raisons de ne pas l'utiliser (dont l'une est que vous finirez par écrire beaucoup d'appels de gestionnaire d'événements redondants comme vous le faites maintenant).

N'oubliez pas! Je dois utiliser des paramètres

Non, vous ne le faites pas (sauf s'il s'agit d'une sorte de devoir scolaire que vous n'avez pas indiqué - et si tel est le cas, récupérez votre argent pour le cours parce que l'instructeur ne devrait pas vous enseigner des méthodes dépassées d'écriture de code , même à des fins d'apprentissage). Chaque bouton affiche déjà le numéro qui lui correspond. L'utilisation d'un paramètre est juste plus de redondance dans le code qui le rend plus fragile d'une solution. Vous avez juste besoin d'une fonction centralisée qui s'exécute lorsque l'un des boutons est cliqué et cette fonction peut simplement comparer le nombre aléatoire avec le contenu du bouton cliqué.

De plus, vous ne pouvez pas avoir plusieurs éléments avec le même id.

Prenez note de la netteté du HTML lorsque vous séparez les gestionnaires d'événements du HTML et notez que cette solution fonctionne quel que soit le nombre de boutons que vous souhaitez que le jeu comporte. Assurez-vous simplement que tout bouton faisant partie du jeu a la classe gameButton et que le contenu de l'élément est le prochain caractère numérique qui n'a pas encore été utilisé.

// Get all buttons into an Array
var buttons = Array.prototype.slice.call(document.querySelectorAll("button.gameButton"));

// Loop over the buttons
buttons.forEach(function(btn){

  // Give each button a click event callback function
  btn.addEventListener("click", function(){
  
    // Generate a random number from 1 to the number of buttons there are in the game
    var num = Math.floor(Math.random() * buttons.length) + 1 ;
    
    var output = "The random was: " + num + ", and the clicked button was: " + this.textContent;
    
    // The prepended + converts the text to a number
    if(num === +this.textContent){
      alert("You win!\n" + output);
    } else {
      alert("Keep trying!\n" + output);
    }    
  });
});
/* Just for fun */
.gameButton{
  background-color:#800080;
  color:#ff0;
  font-weight:bold;
  font-size:2em;
  border-radius:2em;
  box-shadow:2px 2px #808080;
  outline:none;
}

.gameButton:active{
  box-shadow:-2px -2px #808080;
}
<button class="gameButton">1</button>
<button class="gameButton">2</button>
<button class="gameButton">3</button>
<button class="gameButton">4</button>
<button class="gameButton">5</button>
<button class="gameButton">6</button>
2
Scott Marcus 16 avril 2018 à 15:41

Comme mentionné, vous ne pouvez pas utiliser le même ID sur plusieurs éléments.

Un bon moyen est de retirer l'id du bouton et de le passer à la fonction, comme ceci:

Jetez un œil à cette autre question et réponses en détail:

Comment obtenir l'ID de l'utilisateur du bouton qui vient d'être cliqué?

0
Ralph 16 avril 2018 à 15:22

Vous n'avez pas besoin d'une fonction distincte pour chaque bouton. Vous pouvez passer un paramètre directement à l'instruction d'appel de fonction:

<button id="runs" onclick="i(0)">0</button>
<button id="runs" onclick="i(2)">1</button>
...

Et puis dans votre code JS:

function i(param) {
  ...
}

Pour en savoir plus, ici: https://www.w3schools.com/js/js_functions.asp

1
Taras Romaniv 16 avril 2018 à 15:14