即使当我选择正确的颜色时，颜色猜测游戏也会返回“错误”

尝试使用JS.Console进行彩色猜测游戏不会显示任何错误，但会提醒我“错误！即使我选择了正确的号码，当它需要提醒“正确！”时......我一直试图解决这个问题约三个小时！即使当我选择正确的颜色时，颜色猜测游戏也会返回“错误”

如果我删除else{ alert ("Wrong!") }，然后点击一个颜色有在all.Also没有回调，如果我在控制台输入square[i].style.background它返回我

undefined

这里是我的代码：

var colors = [ 
    "rgb(255,0,0)", 
    "rgb(255,255,0)", 
    "rgb(0,255,0)", 
    "rgb(0,255,255)", 
    "rgb(0,0,225)", 
    "rgb(255,0,255)" 
    ] 
    var squares = document.querySelectorAll(".square"); 
    var pickedColor = colors [3]; 
    var colorDisplay = document.getElementById("colorDisplay"); 
    colorDisplay.textContent = pickedColor; 

    for(var i = 0; i <squares.length;i++){ 
     // add initial colors to squares 
     squares[i].style.background = colors[i]; 
     // add click listeners to squares 
     squares[i].addEventListener ("click",function() { 
     // grab color of clicked square 
     var clickedColor = this.style.background; 
     // compare color to pickedColor 
     if(clickedColor === pickedColor){ 
      alert("Correct!"); 
     } else { 
      alert("Wrong!") 
     } 
     }); 
    }

这里是我的html代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Color Game</title> 
    <link rel="stylesheet" type="text/css" href="colorGame.css"> 
</head> 
<body> 
<h1>The Great <span id="colorDisplay">RGB</span> Color Game</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 src="colorGame.js"></script> 
</body> 


</html>

来源

2017-08-02 Levan Sharvadze

您是否尝试过通过它与调试步骤和检查值是多少？ – litelite

很高兴看到HTML代码。 –

似乎'style.background'不仅仅给出颜色。 https://jsfiddle.net/7eu6Lk4g/（至少它在Firefox中） – litelite

您使用style.background。你应该用的是style.backgroundColor

的style.background属性包含：

背景色
背景图像
背景重复
背景附件
背景位置

来源

2017-08-02 13:37:09 SpaceNinjaApe

对不起'backgroundColor'是对的。我很抱歉，修正了这个问题 – SpaceNinjaApe

'背景颜色'不是'基本的东西来设置图像作为背景。' –

好吧，我没有这么说。上下文是'style.background'：P但是最后一句话无论如何都没用。 – SpaceNinjaApe

this.style.background给出的格式与您的数组中的格式略有不同，因为它在每个逗号后都有空格（在Chrome中）。这是一个简单的修复。

我想争辩说，通过将元素的颜色作为类（或其他属性）存储，然后检查该属性是否相同，可以避免此问题（以及浏览器特定问题）。这样你的输入不会被浏览器修改。

var colors = [ 
 
    "rgb(255,0,0)", 
 
    "rgb(255,255,0)", 
 
    "rgb(0,255,0)", 
 
    "rgb(0,255,255)", 
 
    "rgb(0,0,225)", 
 
    "rgb(255,0,255)" 
 
    ] 
 
    var squares = document.querySelectorAll(".square"); 
 
    var pickedColor = colors [3]; 
 
    var colorDisplay = document.getElementById("colorDisplay"); 
 
    colorDisplay.textContent = pickedColor; 
 

 
    for(var i = 0; i <squares.length;i++){ 
 
     // add initial colors to squares 
 
     squares[i].style.background = colors[i]; 
 
     // add as class 
 
     squares[i].classList.add(colors[i]); 
 
     // add click listeners to squares 
 
     squares[i].addEventListener ("click",function() { 
 
      // compare color to pickedColor 
 
      if(this.classList.contains(pickedColor)){ 
 
       alert("Correct!"); 
 
      } else { 
 
       alert("Wrong!") 
 
      } 
 
     }); 
 
    }

.square{ 
 
    width : 100px; 
 
    height : 100px; 
 
}

<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 id="colorDisplay" />

来源

2017-08-02 13:43:14

我很欣赏的反馈。我更新了答案，它可以在任何支持'element＃classList'的浏览器上工作 –

即使当我选择正确的颜色时，颜色猜测游戏也会返回“错误”

回答

相关问题