Простой файл Javascript не работает должным образом

Я пытаюсь сделать небольшую игру, используя HTML, CSS и Javascript.Простой файл Javascript не работает должным образом

HTML, CSS и большинство Javascript-кода работают нормально. Однако, когда вы запускаете программу в FireFox и пытаетесь щелкнуть квадрат div, значение фона RGB которого соответствует значению RGB, хранящемуся в переменной, я получаю неправильный ответ. Предполагается, что пользователь предупреждает пользователя «Исправить», но вместо этого все предупреждения выводят «Неправильно».

Вот HTML файл

<!DOCTYPE> 
<html> 
<head> 
    <title>Color Game</title> 
    <link rel="stylesheet" type="text/css" href="colorGame3.css"> 
</head> 
    <body> 

     <h1> 
     RGB Color Game 
     <span id = "colorDisplay"> 
     RGB 
     </span> 
     </h1> 

     <div id="container"> 
      <div class="square"></div> 
      <div class="square"></div> 
      <div class="square"></div> 
      <div class="square"></div> 
      <div class="square"></div> 
      <div class="square"></div> 
     </div> 

     <script type="text/javascript" src="colorGame3.js"></script> 

    </body> 
</html>

Вот это CSS файл

body{ 
    background-color: #232323; 
    } 

.square{ 
width:30%; 
background:purple; 
padding-bottom:30%; 
float:left; 
margin:1.66%; 

} 

#container{ 

max-width:600px; 
margin:20px auto; 
}

Здесь файл JavaScript

var colors = [ 
    "rgb(255,0,0)", 
    "rgb(255,255,0)", 
    "rgb(0,255,0)", 
    "rgb(0,255,255)", 
    "rgb(0,0,255)", 
    "rgb(255,0,255)" 
    ] 

    var squares = document.querySelectorAll(".square"); 

    var pickedColor = colors[2]; 

    var colorDisplay = document.getElementById("colorDisplay"); 

     colorDisplay.textContent = pickedColor; 

     for(var i = 0; i<squares.length;i++){ 

squares[i].style.background = colors[i]; 

squares[i].addEventListener("click",function(){ 

var clickedColor = this.style.background; 

    if(clickedColor === pickedColor){ 

     alert("Correct"); 

    } 
    else{ 

     alert("Wrong"); 
    } 
}); 
}

источник

2016-04-27 Mike Smith

Какие ошибки вы видите на консоли? –

Я думаю, ваша проблема в том, что вы используете фон вместо backgroundColor. Но я не уверен – Kerndog73

Вы должны console.log 'selectedColor' и' clickedColor', они не совпадают. В Chrome, по крайней мере, может быть то же самое в Firefox, значение форматируется с пробелами после разделителей запятой при возврате значения из 'style.background' –

Ваши цвета pickedColor и clickedColor не совпадают, даже если они оба «технически» работают в CSS. this.style.background; вставляет пространство между каждым цветом. Они должны выглядеть так:

var colors = [ 
    "rgb(255, 0, 0)", 
    "rgb(255, 255, 0)", 
    "rgb(0, 255, 0)", 
    "rgb(0, 255, 255)", 
    "rgb(0, 0, 255)", 
    "rgb(255, 0, 255)" 
    ]

источник

2016-04-27 23:21:30 Zak

Хорошо, что сработало. Спасибо за помощь! –

ваше условие, если оно не соответствует. есть пространство.

это предупреждение код alert (pickedColor + clickedColor);

источник

2016-04-27 23:25:58

Простой файл Javascript не работает должным образом

ответ

Смежные вопросы