破碎的“if”语句在JavaScript代码中...

我想运行这段代码，除了if语句之外，一切似乎都在工作。即使存在匹配，但它仍不会显示代码中显示的正确答案，而是将代码显示在else语句中。破碎的“if”语句在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[3]; 
 
var colorDisplay = document.querySelector("#colorDisplay"); 
 

 
colorDisplay.textContent = pickedColor; 
 

 

 
for (var i = 0; i < colors.length; i++) { 
 
    //add initial colors to squares 
 
    squares[i].style.background = colors[i]; 
 
    //add event listener 
 
    squares[i].addEventListener("click", function() { 
 
    //get color of picked square 
 
    var clickedColor = this.style.background; 
 
    //compare to the pickedColor 
 
    console.log(clickedColor); 
 
    if (clickedColor === pickedColor) { 
 
     alert("COORREECCTT"); 
 
    } else { 
 
     alert("WRROONGG!!"); 
 
    } 
 
    }); 
 
}

body { 
 
    background-color: #232323; 
 
} 
 

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

 
#container { 
 
    max-width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
h1 { 
 
    color: #fff; 
 
}

<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> 
 
</body>

来源

2017-10-20 Zack

这就是为什么混合表示和数据通常是一个坏主意。更好的方法是将点击处理程序仅附加到正确的div而不是全部。 – JJJ

正如下面的答案表明你在做'rgb（0,255,255）'==='rgb（0,255,255）''。如果您在'clickedColor'控制台旁边添加了'pickedColor'，可能是一个简单的捕获.log – nilobarp

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[3]; 
 
var colorDisplay = document.querySelector("#colorDisplay"); 
 

 
colorDisplay.textContent = pickedColor; 
 

 

 
for (var i = 0; i < colors.length; i++) { 
 
    //add initial colors to squares 
 
    squares[i].style.background = colors[i]; 
 
    //add event listener 
 
    squares[i].addEventListener("click", function() { 
 
    //get color of picked square 
 
    var clickedColor = this.style.background; 
 
    //compare to the pickedColor 
 
    console.log(clickedColor); 
 
    if (clickedColor === pickedColor) { 
 
     alert("COORREECCTT"); 
 
    } else { 
 
     alert("WRROONGG!!"); 
 
    } 
 
    }); 
 
}

body { 
 
    background-color: #232323; 
 
} 
 

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

 
#container { 
 
    max-width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
h1 { 
 
    color: #fff; 
 
}

<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> 
 
</body>

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)" 
]

我只是增加了空..

来源

2017-10-20 05:48:17 zynkn

您在哪里添加空白？ @Young Kyun Jin – Zack

@Zack您的输入=>'rgb（255,0,0）;'我的输入=>'rgb（255，0，0）;' – zynkn

@Zack您能接受吗？ – zynkn

在if条件你比较两个不同的字符串。当您以rgb()格式应用此颜色时，浏览器使用颜色参数之间的空格对其进行格式化。

你给了：rgb(0,255,0)
在浏览器：rgb(0, 255, 0)

所以，你需要在你的colors阵列添加空格。改变你的颜色阵列到这个，

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)" 
]

来源

2017-10-20 06:04:20

破碎的“if”语句在JavaScript代码中...

回答

相关问题