破碎的「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代碼中...

回答

相關問題