CODEWITHSUNDEEP
javascriptjqueryif-statement
Aron
Aron

Reputation: 9248

Why is my if/else JS statement using jQuery not working?

I was playing around with the code from the w3schools editor which illustrates a jQuery animate function.

I want to try and make this movement reversible though, so I added an if/else statement to allow the div to move back if it had already been clicked.

Here is my code for between the script tags: 

var clicked = false;
$(document).ready(function(){
    $("button").click(function(){
        if (clicked == false){
            $("div").animate({
                left: amount,
                opacity: '0.5',
                height: '150px',
                width: '150px'
            });
            clicked = true;
        } else {
            $("div").animate({
                right: amount,
                opacity: '0.5',
                height: '150px',
                width: '150px'
            });
            clicked = false;
        }

    });
});

I am aware there is probably a better way of doing this, but I am fairly new to jQuery. In any case seeing as jQuery is just extended JavaScript it seems strange that this doesn't work.

--- update: corrected amount not being set and included full page code ---

Here is my new code. The div still doesn't move back when clicked again.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
var clicked = false;
$(document).ready(function(){
    $("button").click(function(){
        if (clicked == false){
            $("div").animate({
                left: '250px'
            });
            clicked = true;
        } else {
            $("div").animate({
                right: '250px'
            });
            clicked = false;
        }
    });
});

</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>

Upvotes: 0

Views: 91

Answers (3)

Aron
Aron

Reputation: 9248

Embarrassing, but my mistake was a misunderstanding of CSS, not JS.

Here is the corrected - and functioning - code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
var clicked = false;
$(document).ready(function(){
    $("button").click(function(){
        if (clicked == false){
            $("div").animate({
                marginLeft: '250px'
            });
            clicked = true;
        } else {
            $("div").animate({
                marginLeft: '0px'
            });
            clicked = false;
        }
    });
});
</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>

Upvotes: 1

Alex Tartan
Alex Tartan

Reputation: 6826

It's failing because you're not setting amount!

var clicked = false;
var amount = 0;
$(document).ready(function(){
   //more code that calls `amount`
})

Check this JSFiddle to see it in action: http://jsfiddle.net/1xt58q0a/1/

New JSFIddle to match updated question: http://jsfiddle.net/1xt58q0a/5/

Upvotes: 2

LarsW
LarsW

Reputation: 1588

You can use the .toggle() function.

$(document).ready(function(){
   $("button").toggle(
      function(){
         $("div").animate({
            left: amount,
            opacity: '0.5',
            height: '150px',
            width: '150px'
        });
     },
     function(){
        $("div").animate({
           right: amount,
           opacity: '0.5',
           height: '150px',
           width: '150px'
        });
     }
   );
});

I assume you have set amount to a value in advance.

The div doesn't change because the opacity, height and width are set the same in both options.

Upvotes: 1

Related Questions