Je crée un jeu simple où il y a deux portes, l'une contenant le prix, l'autre non (générée aléatoirement). L'utilisateur peut cliquer sur l'un ou l'autre et être averti s'il a gagné / perdu. Lorsque j'exécute le code suivant, le résultat est toujours "Boo you lost". Je soupçonne que cela a quelque chose à voir avec:

if ("door1Selection" === "randomDoor"){
$(document).ready(function() {

  let doors = ["door1", "door2"]

  function selectDoor() {
    const randomDoor = doors[Math.round(Math.random())]
    return randomDoor
  }

  const $door1 = $('.door1')
  const $door2 = $('.door2')

  $door1.click(function() {
    const door1Selection = $door1.attr('class');
    if ("door1Selection" === "randomDoor") {
      alert("Yay you win")
    } else {
      alert("Boo you lose")
    }
  })

  $door2.click(function() {
    var door2Selection = $door2.attr('class');
    if ("door2Selection" === "randomDoor") {
      alert("Yay you win")
    } else {
      alert("Boo you lose")
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="door1">button 1</button>
<button class="door2">button 2</button>
-4
Chi Lee 13 avril 2018 à 20:41

3 réponses

Meilleure réponse
  • Vous comparez une chaîne littérale plutôt que des variables.
  • Vous devez appeler la fonction selectDoor() pour obtenir l'index aléatoire. La portée de la variable randomDoor est fermée au bloc de selectDoor.
$(document).ready(function() {

  let doors = ["door1", "door2"]

  function selectDoor() {
    const randomDoor = doors[Math.round(Math.random())]
    return randomDoor
  }

  const $door1 = $('.door1')
  const $door2 = $('.door2')

  $door1.click(function() {
    const door1Selection = $door1.attr('class');
    if (door1Selection === selectDoor()) {
      alert("Yay you win")
    } else {
      alert("Boo you lose")
    }
  })

  $door2.click(function() {
    var door2Selection = $door2.attr('class');
    if (door2Selection === selectDoor()) {
      alert("Yay you win")
    } else {
      alert("Boo you lose")
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="door1">button 1</button>
<button class="door2">button 2</button>
0
Ele 13 avril 2018 à 17:47

Vos variables ne doivent pas être entourées de guillemets. Cela en fait une chaîne, vous comparez donc les chaînes door2Selection === randomDoor qui ne seront jamais vraies.

Tu veux:

if (door1Selection === randomDoor)

Et

if (door2Selection === randomDoor)

Vous devez également extraire la déclaration de randomDoor de la fonction. Mettez-le avec votre déclaration doors (et faites-en un let):

let doors = [ /* stuff */ ];
let randomDoor;

function selectDoor() {
  randomDoor = doors[Math.round(Math.random())]
  return randomDoor;
}
0
samanime 13 avril 2018 à 17:49

Les variables ne doivent pas être placées entre guillemets lors de leur comparaison. Lorsque vous les mettez entre guillemets, vous comparez les noms de variables eux-mêmes et non les valeurs des variables.

if ("door1Selection" === "randomDoor"){

Devrait être

if (door1Selection === randomDoor) {

Cependant, il existe plusieurs domaines où cela pourrait être amélioré:

  • La variable randomDoor est créée en tant que const dans la méthode selectDoor, mais elle sort du domaine d'application lorsque la fonction renvoie sa valeur et ne peut donc pas être utilisée pour une comparaison ultérieure. Par conséquent, vous devez définir complètement la variable randomDoor en dehors de la fonction ou simplement vous en débarrasser et appeler selectDoor dans l'instruction if.
  • Vous pouvez facilement fusionner les méthodes d'événement de clic en un seul clic, même sur tous les boutons avec une classe de porte.

Apporter ces modifications se traduit par ce qui suit:

$(document).ready(function() {
    let doors = ["door1", "door2"]

    function selectDoor() {
        return doors[Math.round(Math.random())]
    }

    $('.door').click(function() {
        if ($(this).hasClass(selectDoor())) {
            alert("Yay you win")
        } else {
            alert("Boo you lose")
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="door door1">Door 1</button>
<button class="door door2">Door 2</button>
0
Josh Mein 13 avril 2018 à 18:14