比较属性值和随机数（JavaScript / jQuery）

Question

I have a problem with comparing an attribute value and a random number (created in a separated function). In my html I have several divs within a surrounding div. Each div within the surrounding element has an attribute, called 'value', the first one contains the value: 1, the second one: 2, ... Like this:

      <div id="Stage_placeholder_rectangles">
        <div id="Stage_placeholder_rectangles_red" value=0 width=25 height=25/>
        <div id="Stage_placeholder_rectangles_pink" value=1 width=25 height=25/>
        <div id="Stage_placeholder_rectangles_orange" value=2 width=25 height=25/>
        ...
      </div>

Now I want to compare the attribute 'value' with a random number, which was made to show random random colors: The function is lik this:

function randomNumber(){
        random = Math.floor(Math.random() * 9);
        return random;
}


function randomColors(){
    while(pastRandom == newRandom){
        newRandom = randomNumber();
    }
    pastRandom = newRandom;
    switch(newRandom){
        case 0:
            stageRef.getSymbol("placeholder_colors").stop("red");
            break;
        case 1:
            stageRef.getSymbol("placeholder_colors").stop("black");
            break;
        case 2:
            stageRef.getSymbol("placeholder_colors").stop("yellow");
            break;
        case 3:
            stageRef.getSymbol("placeholder_colors").stop("green");
            break;
        case 4:
            stageRef.getSymbol("placeholder_colors").stop("orange");
            break;
        case 5:
            stageRef.getSymbol("placeholder_colors").stop("pink");
            break;
        case 6:
            stageRef.getSymbol("placeholder_colors").stop("blue");
            break;
        case 7:
            stageRef.getSymbol("placeholder_colors").stop("gray");
            break;
        case 8:
            stageRef.getSymbol("placeholder_colors").stop("purple");
            break;
    }
    checkColor(newRandom);
}

In my function checkColor, I want to compare the random number with the value that is stored in the attribute value of 'placeholder_rectagles_orange', 'placeholder_rectagles_red', ... This is my function:

function checkColor(rnd){
    if(gameStarted){
        $("#Stage_placeholder_rectangles").click(function(e){
            if($("#"+e.target.id).attr("value") == rnd){
                console.log("right");
            }
            else if($("#"+e.target.id).attr("value") != rnd){
            console.log("false");
            gameOver = true;
            }
        });
    }
}

My problem is, that when I the right element (the one with the same value in his attribute 'value' as the random number, I get in my console: "right" and multiple times "false", even when my attributes value and random number are the same.

Answer 1

I think part of your problem is the usage of rnd , which is not defined earlier, but we don't have all of your code.

Here it is working:

<div>Please click the colour: <span id="name"></span></div>
<p/>
<div id="Stage_placeholder_rectangles">
    <div id="Stage_placeholder_rectangles_red" class="square red" value=0 width="25" height="25"></div>
    <div id="Stage_placeholder_rectangles_pink" class="square pink" value=1 width="25" height="25"></div>
    <div id="Stage_placeholder_rectangles_orange" class="square orange" value=2 width=25 height="25"></div>
 </div>
<p/>
<div id="result"></div>

And the JS:

var colors = ["red","pink","orange"],
gameStarted = true, newRandom, pastRandom;

function randomNumber(){
    random = Math.floor(Math.random() * 3);
    return random;
}


var giveOption = function() {
    while(pastRandom == newRandom){
        newRandom = randomNumber();
    }
    pastRandom = newRandom;
    $("#name").html(colors[newRandom]);
};
$("#Stage_placeholder_rectangles").click(function(e){
    var val = $(e.target).attr("value"), 
        resultDiv = $("#result");
    if(val == newRandom){
        resultDiv.html("right!");
        giveOption();
    } else {
        resultDiv.html("Wrong! Sorry. Game over");
       gameOver = true;
    }
});

giveOption();

There also is a lot of stuff that could be simplified using arrays and jquery, but I left it for now.

Fully functional jsfiddle at http://jsfiddle.net/obqmwLet/1/