jQuery variable in numerical parameter

Question

So I'm very new to jQuery but do certain projects to try to get better. Now I've run into this problem I can't get my head around and donut know what to search for to get help...

I've set the variable "height" to the original "data-sizey". This works fine as the console outputs the correct size. What I want to do next is use this variable in the second function, here gridster.resize_widget($(this).parent().parent(), 0, height);

Problem is that this doesn't work (does nothing) and I can't understand why. It's probably really stupid and if you could explain to me how I should be using the variable here I'd be so grateful!

 //Resize widget on handler click
          function handler1() {
              var height = $(this).parent().parent().attr( "data-sizey" );
             // console.log(height, "Height");
              gridster.resize_widget($(this).parent().parent(), 0, 1);
              $(this).toggleClass('arrow_rotate');
              $(this).parent().parent().toggleClass('minimized');
               $(this).one("click", handler2);
            }

            function handler2() {
                gridster.resize_widget($(this).parent().parent(), 0, height);
                $(this).toggleClass('arrow_rotate');
                $(this).parent().parent().toggleClass('minimized');
                $(this).one("click", handler1);
            }
            $(".minimize").one("click", handler1);

Answer 1

The problem is that your height variable is not visible inside the scope of your handler2 function because it was declared inside handler1, you could pass it as a parameter to handler2 as follows:

      //Resize widget on handler click
      function handler1() {
          var height = $(this).parent().parent().attr( "data-sizey" );
         // console.log(height, "Height");
          gridster.resize_widget($(this).parent().parent(), 0, 1);
          $(this).toggleClass('arrow_rotate');
          $(this).parent().parent().toggleClass('minimized');
          $(this).one("click", function(){
              handler2(height);
          });
        }

        function handler2(height) {
            gridster.resize_widget($(this).parent().parent(), 0, height);
            $(this).toggleClass('arrow_rotate');
            $(this).parent().parent().toggleClass('minimized');
            $(this).one("click", handler1);
        }
        $(".minimize").one("click", handler1);

Or define the height variable outside of handler1 scope:

      //Resize widget on handler click
      var height;
      function handler1() {
          height = $(this).parent().parent().attr( "data-sizey" );
         // console.log(height, "Height");
          gridster.resize_widget($(this).parent().parent(), 0, 1);
          $(this).toggleClass('arrow_rotate');
          $(this).parent().parent().toggleClass('minimized');
          $(this).one("click", handler2);
        }

        function handler2() {
            gridster.resize_widget($(this).parent().parent(), 0, height);
            $(this).toggleClass('arrow_rotate');
            $(this).parent().parent().toggleClass('minimized');
            $(this).one("click", handler1);
        }
        $(".minimize").one("click", handler1);