JavaScript if语句比较不起作用

问题描述:

if语句应该将buttonId值与randButtonId值进行比较,即使它们匹配时仍然表示它是错误的。按钮从左到右依次为button1,button2,button3,button4。JavaScript if语句比较不起作用

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

+2

您可以向我们展示了'randomNumber'功能?可能不会返回您所期望的内容 – Pabs123

+0

代码段中存在另一个错误。 – Sakezzz

+0

似乎在'setBoard'函数中定义了'randButtonId',当你处于'checkCorrect'时,这个值是不确定的。尝试在函数外部定义它,它应该工作 – Kaddath

这可能与词法范围有关。考虑你的这部分代码:

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

您expecing的功能使用的第一行声明的全局变量randButtonId。但'setBoard'函数使用var来告诉解释器,变量randButtonId是范围本地的。

TL; DR:如果你想使用全局变量randButtonIdsetBoard,跳过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" }

你没有申报randomNumber功能

将头标签内的这个脚本

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