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>3 réponses
- 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 variablerandomDoorest 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>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;
}
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>