CODEWITHSUNDEEP
javascriptjquery
Carl Papworth
Carl Papworth

Reputation: 1322

How do I get a count variable to work?

So I am trying to fire an event with a count, but I don't seem to get it working. What I want to do is to fade in the #reward when 6 a.correct links are clicked. No idea why it isn't working. Would love some help :)

Link: http://www.carlpapworth.com/htmlove/sweet-talk.html

HTML:

    <body>
<header>
    <div id="headerTitle"><a href="index.html">&lt;html<span class="heart">&hearts;</span>ve&gt;</a>
            </div>
            <div id="help">
                <h2>?</h2>
                <div id="helpInfo">
                    <p>The name of the puzzle should lead u to success!</p>
                </div>
            </div>
        </header>
    <div id="reward">
        <div id="rewardContainer">
            <div id="rewardBG" class="heart">&hearts;
            </div>
            <p>OMG, this must be luv<br><a href="index.html" id="exit4" data-key="4" class="exit">x</a></p>
        </div>
    </div>  
    <div id="pageWrap">
        <div id="poem">
        <a href="#">w</a>
        <a href="#">h</a>
        <a href="#">e</a>
        <a href="#">n</a>&nbsp;

        <a href="#">t</a>
        <a href="#">h</a>
        <a href="#">e</a>&nbsp;

        <a href="#">t</a>
        <a href="#" class="correct">h</a>
        <a href="#">u</a>
        <a href="#">m</a>
        <a href="#">p</a>
        <a href="#">i</a>
        <a href="#">n</a>
        <a href="#">g</a>&nbsp;

        <a href="#">g</a>
        <a href="#">r</a>
        <a href="#">o</a>
        <a href="#">w</a>
        <a href="#">s</a>&nbsp;

        <br>
        <a href="#">w</a>
        <a href="#">h</a>
        <a href="#">e</a>
        <a href="#">n</a>&nbsp;

        <a href="#">t</a>
        <a href="#">h</a>
        <a href="#">e</a>&nbsp;
        <a href="#">p</a>
        <a href="#">u</a>
        <a href="#">l</a>
        <a href="#">s</a>
        <a href="#" class="correct">e</a>&nbsp;

        <a href="#">i</a>
    <a href="#">s</a>&nbsp;

    <a href="#">p</a>
    <a href="#">u</a>
    <a href="#">m</a>
    <a href="#">p</a>
    <a href="#">i</a>
    <a href="#">n</a>
    <a href="#">g</a>&nbsp;

    <a href="#">h</a>
    <a href="#">a</a>
    <a href="#">r</a>
    <a href="#">d</a>
    <br>
    </a>
    <a href="#" class="correct">a</a>
    <a href="#">n</a>
    <a href="#">d</a>
    <br>
    <a href="#">e</a>
    <a href="#">v</a>
    <a href="#">e</a>
    <a href="#">r</a>
    <a href="#">y</a>&nbsp;

    <a href="#">s</a>
    <a href="#">e</a>
    <a href="#">n</a>
    <a href="#">s</a>
    <a href="#">e</a>&nbsp;

    <a href="#" class="correct">r</a>
    <a href="#">e</a>
    <a href="#">p</a>
    <a href="#">e</a>
    <a href="#">a</a>
    <a href="#">t</a>
    <a href="#">s</a>&nbsp;

    <a href="#">t</a>
    <a href="#">h</a>
    <a href="#">e</a>&nbsp;

    <a href="#">b</a>
    <a href="#">e</a>
    <a href="#">a</a>
    <a href="#">t</a>
    <br>
    <a href="#">t</a>
    <a href="#">h</a>
    <a href="#">e</a>
    <a href="#">n</a>&nbsp;

    <a href="#">l</a>
    <a href="#">e</a>
    <a href="#">t</a>
    <a href="#" class="correct">t</a>
    <a href="#">i</a>
    <a href="#">n</a>
    <a href="#">g</a>&nbsp;

    <a href="#">g</a>
    <a href="#">o</a>&nbsp;

    <a href="#">i</a>
    <a href="#">s</a>&nbsp;

    <a href="#">a</a>
    <a href="#">l</a>
    <a href="#">l</a>
    <br>
    <a href="#">o</a>
    <a href="#">u</a>
    <a href="#">r</a>&nbsp;

    <a href="#">s</a>
    <a href="#">o</a>
    <a href="#">r</a>
    <a href="#">r</a>
    <a href="#">y</a>&nbsp;

    <a href="#" class="correct">s</a>
    <a href="#">o</a>
    <a href="#">u</a>
    <a href="#">l</a>
    <a href="#">s</a>&nbsp;

    <a href="#">m</a>
    <a href="#">u</a>
    <a href="#">s</a>
    <a href="#">t</a>&nbsp;

        <a href="#">d</a>
    <a href="#">o</a>
    </div>
</div> <!-- END Page Wrap -->
<footer>
    <div class="heartCollection">
        <p>collect us if u need luv:<p>
        <ul>
            <li><a id="collection1" class="notFound">&hearts;</a></li>
            <li><a id="collection2" class="notFound">&hearts;</a></li>
            <li><a id="collection3" class="notFound">&hearts;</a></li>
            <li><a id="collection4" class="notFound">&hearts;</a></li>
            <li><a id="collection5" class="notFound">&hearts;</a></li>
            <li><a id="collection6" class="notFound">&hearts;</a></li>
        </ul>
    </div>
    <div class="credits">with love from Popm0uth ©2012</div>
</footer>

Javascript:

var count = 0;
$(document).ready(function() {

    $('a.correct').click(function(){    
                $(this).css('color','#ff63ff');
                count++;
    });
    $('a:not(.correct)').click(function(){
        $('a.correct').css('color','#363636');  
    });
    if (count == 6) {
        $('#reward').fadeIn(1000);
    }
});

Upvotes: 0

Views: 127

Answers (4)

Arun Killu
Arun Killu

Reputation: 14233

var count = 0;

    $(document).ready(function() {

        $('a.correct').click(function(){    

                    $(this).css('color','#ff63ff');
                    count++;
             alert(count);
        });
        $("a:not(class correct) ").click(function(){
            $('a.correct').css('color','#363636');  
           if (count == 6) {
            $('#reward').fadeIn(1000);
            }
        });

    });

​fiddle demo jsfiddle

Upvotes: 0

Tats_innit
Tats_innit

Reputation: 34107

Working demo http://jsfiddle.net/cztSt/

This will hel, 2 things:

  • When count reaches 6 I have check function that gets invoked.
  • Your render should be hidden to start if you wan fadeIn effect.

Rest should help you needs :)

Code

$(document).ready(function() {
    count = 0;
    $('a.correct').click(function() {
        $(this).css('color', '#ff63ff');
        count++;
        check();
    });
    $('a:not(.correct)').click(function() {
        $('a.correct').css('color', '#363636');
    });

    function check() {

        if (count == 6) {
            $('#reward').fadeIn(1000);
        }
    }
});​

Upvotes: 0

Th0rndike
Th0rndike

Reputation: 3436

Everything you're doing is fine, except the part where you fadeIn the reward. That's gonna happen only on document.ready. I would put it just after the count increment:

$('a.correct').click(function(){    
            $(this).css('color','#ff63ff');
            count++;
            if (count == 6) {
                $('#reward').fadeIn(1000);
            }
});

Upvotes: 1

Vivek S
Vivek S

Reputation: 5540

Just include your fadein condition into the click listener,

var count = 0;
$(document).ready(function() {

$('a.correct').click(function(){    
            $(this).css('color','#ff63ff');
            count++;
if (count == 6) {
    $('#reward').fadeIn(1000);
}
});
$('a:not(.correct)').click(function(){
    $('a.correct').css('color','#363636');  
});

});

Upvotes: 2

Related Questions