Trouble with simple(?) jquery/javascript variables

Question

So I am having a problem with something that I think should be very simple.

I coded this example for simplicity's sake: I first noticed the problem in a larger body of code. However the issue still persists here.

<!DOCTYPE html>
<html>
<head>
<style>
#test
{
    height: 300px;
    width: 300px;
    background: blue;
    position:absolute;
    top: 0px;
    left: 0px;
}

</style>
</head>
<body>
<div id="test"></div>
<script src='jquery-1.10.2.min.js'>
</script>
<script>
var isClicked = false;
$(document).ready(function(){
    $('#test').click(function(){
        isClicked = true;
    });
    if (isClicked == true)
    {
        $('#test').animate({top:'200px'});
    }
});
</script>
</body>
</html>

The animation is not playing... obviously the same task could be accomplished in an easier way, but I still don't understand why the variable is not working. Probably just a stupid typo - but maybe not.

Thanks for the help!

You need to put the code with the if condition inside the click handler....? By the way what are you trying to achieve with the isClicked flag? $('#test').click(function(){ if (isClicked) { $(this).animate({top:'200px'}); } isClicked = !isClicked; }); — PSL
– PSL, Commented Nov 11, 2013 at 20:59
At the time of evaluating if isClicked (==true), isClicked isn't set. The code doesn't know it yet. — Jonathan Allard
– Jonathan Allard, Commented Nov 11, 2013 at 21:00
When you click, you just set the variable isClicked to true and nothing else. Put that if (...) {...} inside the function of the click. — acdcjunior
– acdcjunior, Commented Nov 11, 2013 at 21:00

Samuel · Accepted Answer · 2013-11-11 21:01:55Z

4

Your test of isClicked is performed at dom ready, and at that point, you haven't clicked yet.

You should move the code in the click handler function.

answered Nov 11, 2013 at 21:01

Samuel

2,1561 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

meavo · Accepted Answer · 2013-11-11 21:04:16Z

2

When the DOM is loaded, isClicked will have the value 'false'. Since the value is false, the animation will not occur. Change your JS in something like this:

$(document).ready(function () {
    var isClicked = false;
    $('#test').on('click', function (event) {
        isClicked = !isClicked;
        if (isClicked) {
            $(this).animate({top: '200px'});
        }
    });
});

answered Nov 11, 2013 at 21:04

meavo

1,0401 gold badge7 silver badges16 bronze badges

Collectives™ on Stack Overflow

Trouble with simple(?) jquery/javascript variables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related