CODEWITHSUNDEEP
javascriptjquery
pr-
pr-

Reputation: 402

Javascript change variable using buttons

I am trying to make a button open up another window using jquery.

The button should be able to open the window. Then the same button should be used to close the window afterwards. The problem I seem to be having appears that my variables are not being set after the button opens the window. I am really new to javascript and jquery, so I'm not sure if I did something wrong.

<html>
  <head>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript"> 
      var FileEdit = 0;
      $(document).ready(function(){
        if (FileEdit == 0)
        {
           $("button").click(function(){
             $("div").animate({opacity:0.4},"fast");
             $("div").animate({height:300,width:300},"slow");
             $("div").animate({opacity:1},"slow");
             FileEdit = 1;
           });
        }  
        if (FileEdit == 1)
        {
             $("button").click(function(){
                $("div").animate({height:000,width:000},"slow");
                FileEdit = 0;
             });
        }
      });
    </script> 
  </head>

     <body>
       <button>Start Animation</button>
       <br /><br />
       <div style="background:#98bf21;height:000px;width:000px;">
       </div>
    </body>
</html>

http://jsfiddle.net/tqpTE/

Upvotes: 1

Views: 122

Answers (2)

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66971

jsFiddle DEMO

var FileEdit = 0;

$("button").on('click', function(){

    // You only need one on('click') function
    // Test for FileEdit here & do whatever you need

    if (FileEdit === 0) { 

        // Also having those 3 animations right in a row won't make them
        // go one - after - another. You need to use callback functions
        // to start the next animation after the previous one finished.

        $("div").animate({opacity:0.4},"fast", //callback1
            function () { $(this).animate({height:300,width:300},"slow", //callback2
                function () { $("div").animate({opacity:1},"slow"); }
            )}
        );
        FileEdit = 1;
    }

    else { 
         $("div").animate({height:000,width:000},"slow");
         FileEdit = 0;
    }
});

More info on .animate() callback functions

Upvotes: 3

Mitya
Mitya

Reputation: 34556

Your condition needs to run on each click - not just once, on DOM ready, as currently. Also note your code can quite drastically be reduced to something like this:

var fileEdit = 0;
$(function(){
    $("button").on('click', function() {
        var anim_data = !fileEdit ? {width: 300, height: 300} : {width: 0, height: 0};
        $("div").animate(anim_data, 'slow');
        fileEdit = !fileEdit ? 1 : 0;
    });
});

A few notes:

1) You seemed to be animating the opacity twice (once to .4, and, simultaneously, to 1) so, for the purpose of this demo, I removed reference to it entirely.

2) Unless you need to animate to partial opacity (rather than 0 or 1) it's easier to use jQuery's fadeIn() and fadeOut() methods.

3) Setting width: 000 is the same as width: 0.

4) Avoid capital letters in var names - capital letters are used normally to denote constructor functions.

5) Be careful when testing against 0 and 1 values with double equals as you will get some surprising due to the concept of truthy/falsy values. In unsure, it's always safest to test with === not ==.

6) Whilst click is fine, jQuery 1.7 introduced a tidy-up of its messy events API and so you can now just use on() and off(). click() and others are just aliases that, behind the scenes, delegate to on().

Upvotes: 1

Related Questions