Локальная переменная внутри EventListener не работает - PullRequest
Новая
       17

Локальная переменная внутри EventListener не работает

0 голосов
/ 23 апреля 2020

Я новичок в JavaScript, и я пытался написать проект по угадыванию цветов. Вот разметка html для страницы 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Great Color Game</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <h1>My <span id="display">RGB</span> color game project</h1>
    <div id="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

    <script src="color_code.js"></script>
</body>
</html>

, а вот коды файлов javaScript для этого 

var colors = [
     "rgb(255,0,0)",
     "rgb(255,255,0)",
     "rgb(255,0,255)",
     "rgb(0,255,0)",
     "rgb(0,0,255)",
     "rgb(0,255,255)"
];
var squres = document.querySelectorAll(".box");
var choosed = colors[4];
var display = document.getElementById("display");
display.textContent = choosed;
for(var i = 0;i < squres.length; i++){
    squres[i].style.background = colors[i];
    squres[i].addEventListener("click", function(){
         var clickedColor = this.style.background; //I'm doubting if here is anything wrong
        if(clickedColor === choosed){
            alert("Correct!");//this code is not runnig
        }else{
            alert("Try again"); //this is runnign in all the cases
        };
    });
};

Я должен получить alert Correct! всякий раз, когда я нажимаю 5-й цвет, но он всегда дает мне alert try again независимо от того, что я нажимаю. В чем может быть проблема здесь? Заранее спасибо. Примечание: я не упомянул файл css, потому что думал, что в этой проблеме нет необходимости.

...