JavaScript wenn Anweisung Vergleich nicht funktioniert

Question

Die if-Anweisung soll buttonId Wert mit randButtonId Wert vergleichen und selbst wenn sie übereinstimmen, sagt es immer noch, dass es falsch ist. Die Tasten gehen von links nach rechts, Taste1, Taste2, Taste3, Taste4.

setBoard(); 
 
var randButtonId; 
 
function setBoard(){ 
 
    var r = randomNumber(0 , 235); 
 
    var g = randomNumber(0 , 235); 
 
    var b = randomNumber(0 , 235); 
 
    var color = rgb(r, g, b); 
 
    var r2 = r + 20; 
 
    var g2 = g + 20; 
 
    var b2 = b + 20; 
 
    var diffColor = rgb(r2 , g2 , b2); 
 
    var randButtonId = "button" + randomNumber(1,4); 
 
    setProperty("button1", "background-color", color); 
 
    setProperty("button3", "background-color", color); 
 
    setProperty("button2", "background-color", color); 
 
    setProperty("button4", "background-color", color); 
 
    setProperty(randButtonId, "background-color", diffColor); 
 
    console.log("The correct one is: " + randButtonId); 
 
} 
 

 
function checkCorrect(buttonId){ 
 
    console.log("Checking: " + buttonId); 
 
    if(buttonId == randButtonId) { 
 
     console.log("You got it right!"); 
 
    } else { 
 
     console.log("WRONG"); 
 
    } 
 
    setBoard(); 
 
} 
 
onEvent("button1", "click", function() { 
 
    checkCorrect("button1"); 
 
}); 
 
onEvent("button2", "click", function() { 
 
    checkCorrect("button2"); 
 
}); 
 
onEvent("button3", "click", function() { 
 
    checkCorrect("button3"); 
 
}); 
 
onEvent("button4", "click", function() { 
 
    checkCorrect("button4"); 
 
});

Answer 1

Dies ist wahrscheinlich mit lexikalischen Scoping zu tun hat. Betrachten Sie diesen Teil des Codes:

var randButtonId = 'original value'; 
 

 
function setBoard() { 
 
    // ... 
 
    var randButtonId = 'something' 
 
    console.log({ 
 
    randButtonId: randButtonId 
 
    }) 
 
    // ... 
 
} 
 

 
function checkCorrect(buttonId) { 
 
    console.log({ 
 
    randButtonId: randButtonId 
 
    }) 
 
} 
 

 
checkCorrect() // { "randButtonId": "original value" } 
 
setBoard() // { "randButtonId": "something" } 
 
checkCorrect() // { "randButtonId": "original value" }

Sie Ihre Funktionen expecing die globale Variable randButtonId in der ersten Zeile erklärt zu verwenden. Die "setBoard" -Funktion verwendet jedoch var, um dem Interpreter mitzuteilen, dass die Variable randButtonId der lokale Bereich ist.

TL; DR: Wenn Sie die globale var randButtonId innerhalb setBoard, überspringen Sie die var Erklärung verwenden möchten.

Die Verwendung von globalen Variablen ist jedoch eine schlechte Praxis, da es zu dieser Art von Problemen führt. Ein viel sicherer Ansatz ist es, all Ihre Logik in einem Namespace einzukapseln. Zum Beispiel:

var ButtonChecker = { 
 
    randButtonId: 'original value', 
 
    
 
    setBoard: function() { 
 
    // ... 
 
    this.randButtonId = 'something' 
 
    console.log({ 
 
     randButtonId: this.randButtonId 
 
    }) 
 
    // ... 
 
    }, 
 

 
    checkCorrect: function(buttonId) { 
 
    console.log({ 
 
     randButtonId: this.randButtonId 
 
    }); 
 
    } 
 
}; 
 

 
ButtonChecker.checkCorrect(); // { "randButtonId": "original value" } 
 
ButtonChecker.setBoard(); // { "randButtonId": "something" } 
 
ButtonChecker.checkCorrect(); // { "randButtonId": "something" }

Answer 2

Sie haben nicht random erklärt Funktion

Setzen Sie dieses Skript in head-Tag

<script> 
function randomNumber(min, max) { 
    min = Math.ceil(min); 
    max = Math.floor(max); 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 
</script>