CODEWITHSUNDEEP
jqueryif-statement
Sweely
Sweely

Reputation: 396

Why is my if/else...if statement not working?

One picture gets displayed, and you get to click a button. If the buttons class matches the class of the picture (i.e. you're correct) - I want to print a message. And I am.

But if the classes do not match I wish to display a message saying that the guess was wrong. It's easier shown. So here's my jQuery:

$(document).ready(function(){

$('.left').hide();
$('.right').hide();

$('.happy').click(function(){

    $('.left').show();
    $('.right').show();

    if($(this).hasClass('happy') && $("img").hasClass('happy')){
        $('h2').replaceWith("<h2>You are correct!</h2>");
    }else if(!$('img').hasClass('happy')){
    alert("LOL");
    };
});
});

The first part of my code, that displays the h2 if the button has been pressed - works. But the second part - else if(!$('img').hasClass('happy')) - does not. Why?

My HTML: http://jsfiddle.net/WEAt6/3/

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="stylesheet.css">
    <title>
       gzzzz
    </title>
</head>

<body>
    <div id="container">
        <div id="answers">
        <div class="sadness">
            <p class="feelings">SADNESS</p>
        </div>
        <div class="anger">
            <p class="feelings">ANGER</p>
        </div>
        <div class="surprise">
            <p class="feelings">SURPRISE</p>
        </div>
        <div class="fear">
            <p class="feelings">FEAR</p>
        </div>
        <div class="disgust">
            <p class="feelings">DISGUST</p>
        </div>
        <div class="contempt">
            <p class="feelings">CONTEMPT</p>
        </div>
        <div class="happy">
            <p class="feelings">HAPPINESS</p>
        </div>

        </div>

        <div class="thegame">
            <div class="pic">
                <img class="left" src="http://upload.wikimedia.org/wikipedia/commons/5/55/Happy_man.jpg"/ >
            </div>
            <div class="pic">
                <img class="happy" src="http://upload.wikimedia.org/wikipedia/commons/5/55/Happy_man.jpg"/ >
            </div>
            <div class="pic">
                <img class="right" src="http://upload.wikimedia.org/wikipedia/commons/5/55/Happy_man.jpg"/ >
            </div>
        </div>

        <div id="score">
            <h2></h2>
            </div>
    </div>
</body>
<script src="jQuery.js"></script>
<script src="stuff.js"></script>
</html>
​

Upvotes: 0

Views: 454

Answers (3)

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35963

The error is in the log see the demo please: DEMO

$('#answers div').click(function(){

        $('.left').show();
        $('.right').show();

        if($(this).hasClass('happy') && $("img").hasClass('happy')){

            $('h2').replaceWith("<h2>You are correct! Happiness looks the same on everybody.</h2>");
            setTimeout(trolli,2000);
            function trolli(){

             sadgame = $('.thegame').html('<div class="pic"><img class="left" src="http://f1.pepst.com/c/01850B/322662/ssc3/home/062/dard-sms/sad_wom_an.jpg_480_480_0_64000_0_1_0.jpg"/ ></div><div class="pic"><img class="sadness" src="http://f1.pepst.com/c/01850B/322662/ssc3/home/062/dard-sms/sad_wom_an.jpg_480_480_0_64000_0_1_0.jpg"/ ></div><div class="pic"><img class="right" src="http://f1.pepst.com/c/01850B/322662/ssc3/home/062/dard-sms/sad_wom_an.jpg_480_480_0_64000_0_1_0.jpg"/ ></div>');
            $('h2').replaceWith("<h2>What emotion is being shown?</h2>");
            $('.left').hide();
            $('.right').hide();

            }

        }else if(!$(this).hasClass('happy')){
            alert("LOL");
        };
    });

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074168

The logic of your if statement has two conditions. So it's possible that $(this).hasClass('happy') is false, but $("img").hasClass('happy') (in the else if) is true, so neither the if block nor the else if block's code runs.

A couple of side-notes:

  1. $("img").hasClass('happy') will tell you whether any img in the document has the class happy. You haven't quoted your HTML, but it seems worth mentioning. So since you do have an image with that class, it will always be true. If you want to check a specific image, either give it a second class and use $("img.theOtherClass").hasClass("happy") or you can do it by position: $("img").first().hasClass("happy") for the first, $("img").eq(1).hasClass('happy') for the second (eq is 0-based), etc.

  2. $('h2').replaceWith("<h2>You are correct!</h2>"); replaces the h2 with another, new h2. Probably better just to change its content: $('h2').html('You are correct!');.

  3. The code in #2 above (both yours and mine) will change all h2 elements in the document. Again, maybe that's fine, but it seemed worth highlighting. You might consider $("#score h2").html("You are correct!"); if you just want to change the one inside the element with the id "score".

Upvotes: 5

Brett Gregson
Brett Gregson

Reputation: 5913

Why are you using an else if? Surely you are checking whether is has the class, or not. There is no need to do a second comparison. Just use else

if($(this).hasClass('happy') && $("img").hasClass('happy')){
    $('h2').replaceWith("<h2>You are correct!</h2>");
}else {
    alert("LOL");
}

Upvotes: 0

Related Questions