If statement is always false even if the condition is true in java script

Question

this is the javascript and HTML and CSS I m very new to javascript the problem is if statement is always showing wrong even though it should not if statement is always false even if I click on the value of the color of win variable that the value of the 3rd index of the array colors its showing wrong

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 win =colors[3];
var winclrdisplay=document.querySelector(".winclr");
var square= document.querySelectorAll(".square");

 winclrdisplay.textContent=" "+ win;
 
 for (var  i = 0 ;i < square.length ; i++){
  //colors 
  square[i].style.background =colors[i];
  
  // click listener
  square[i].addEventListener("click", function(){
   var click = this.style.background;
   if (click == win){
    alert("correct");
   }else{
    alert("wrong");
   }
  }
   );
 }

body {
 background-color: #232323;
}

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


}

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

<html>
<head>
 <title>color guessing game</title>
 <link rel="stylesheet" type="text/css" href="colorapp.css">

</head>
<body>
 <h1>The Great <span class="winclr"></span> colour 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 type="text/javascript" src="colorapp.js"></script>
</body>
</html>

You want to do a `console.log(click)` to see what value you are _actually_ getting. — CBroe, May 16 '17 at 08:44
Possible duplicate of [How can I compare two color values in jQuery/JavaScript?](http://stackoverflow.com/questions/2377696/how-can-i-compare-two-color-values-in-jquery-javascript) — CBroe, May 16 '17 at 08:45
consider writing the colors in hexadecimal code, which can be compared as a string — Eduard Void, May 16 '17 at 08:46
@CBroe: No, he/she wants to use the powerful debugger built into the browser to see what he/she is actually getting. No need to stumble around in the dark with a `console.log` torch when you can turn on the lights with the debugger. — T.J. Crowder, May 16 '17 at 08:47
When you were asking your question, there was a big orange **How to Format** box to the right of the text area with useful information in it. There was also an entire toolbar of formatting aids. And a **[?]** button giving formatting help. *And* a preview area located between the text area and the Post Your Question button (so that you'd have to scroll past it to find the button, to encourage you to look at it) showing what your post would look like when posted. Making your post clear, and demonstrating that you took the time to do so, improves your chances of getting good answers. — T.J. Crowder, May 16 '17 at 08:48
Re my formatting comment above: I tried to fix it for you, but it looks like you have two copies of everything? Please use the "edit" link to remove anything redundant, and to correctly handle code blocks. Or better yet, use a Stack Snippet to make a **runnable** [mcve] demonstrating the problem. — T.J. Crowder, May 16 '17 at 08:49
@T.J.Crowder i have taken your udemy course i think you are good man though idk whats wrong with my code plus i new to stack overflow too need help what should i do — Sim Sheeraz, May 16 '17 at 08:53
@SimSheeraz: I don't recall creating a udemy course. What's wrong is clearly called out in my comments above. — T.J. Crowder, May 16 '17 at 09:07
@T.J.Crowder I might have confused you with someone well now I added the code snippet run it and see yourself want the if statement to be true when I click on cyan color but it's false I don't understand why — Sim Sheeraz, May 16 '17 at 09:11
@SimSheeraz: Over half an hour ago, [CBroe pointed out what was wrong](http://stackoverflow.com/questions/2377696/how-can-i-compare-two-color-values-in-jquery-javascript). — T.J. Crowder, May 16 '17 at 09:19

B.V · Answer 1 · 2017-05-16T09:00:18.423

1

use element.getComputedStyle. element.style gets the value if the css style is inline. It is always false because it has no value.

something like this

var element = document.getElementById('box'),
            style = window.getComputedStyle(element),
            bg = style.getPropertyValue('background-color');

    console.log(bg);

edited May 16 '17 at 09:00

answered May 16 '17 at 08:54

B.V

109
2
13

what is an window element colorapp.js:23 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. at HTMLDivElement. (colorapp.js:23) – Sim Sheeraz May 16 '17 at 09:15

score 0 · Answer 2 · answered May 16 '17 at 08:51

0

It is nearly impossible to understand your question as it is not well formatted. But from a quick look you are missing a closing ) in your if statment

if (click == "rgb(0,255,255"){

should be

if (click == "rgb(0,255,255)"){

or

if (click == rgb(0,255,255)){

(again, I'm not sure what your are aiming at)

answered May 16 '17 at 08:51

Nir Levy

4,613
2
34
47

the last one leads to an error, because `rgb(...)` will not be defined.. – Founded1898 May 16 '17 at 08:54
I believe he's just trying to get the rgb color of where he is clicking on the page. – JORDANO May 16 '17 at 08:57
yes i am trying to get the colour from the page on clicking on the different boxes – Sim Sheeraz May 16 '17 at 09:00
I added the code snippet may be now you understand see yourself want the if statement to be true when I click on cyan color but it's false I don't understand why – Sim Sheeraz May 16 '17 at 09:18

If statement is always false even if the condition is true in java script

2 Answers2