JavaScript, если сравнение операторов не работает

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

Это, вероятно, связано с лексической области видимости. Рассмотрим эту часть кода:

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: Если вы хотите использовать глобальные переменные randButtonId внутри setBoard, пропустите 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

Вы не объявленной функции randomNumber

Поместите этот сценарий в голове тега

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