JavaScript ifステートメントの比較が機能しない

Question

ifステートメントは、buttonIdの値とrandButtonIdの値を比較することになっています。一致する場合でも、それは間違っていると表示されます。ボタンは、左から右のボタン1、ボタン2、ボタン3、ボタン4の順になります。

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

これはおそらく、レキシカルスコープに関係しています。あなたのコードのこの部分を考えてみましょう：あなたが最初の行で宣言されたグローバル変数randButtonIdを使用するように関数をexpecingている

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" }

。しかし、theetetBoard'関数は、randButtonIdがスコープローカルであることをインタープリタに伝えるためにvarを使用します。

TL; DR：あなたはsetBoard内でグローバルVAR randButtonIdを使用したい場合は、var宣言をスキップします。

しかし、グローバル変数を使用することは、この種の問題につながるため、悪い習慣です。より安全なアプローチは、名前空間内のすべてのロジックをカプセル化することです。たとえば：

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

あなたが宣言されていなかった乱数機能

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