Variable on two onclick action with jQuery

Question

I try to create a variable on click, and to use it on another onclick action. But it seems that the variable doesn't exist when the second onclick try to use it.

$( "#search" ).click(function() {
    var myVariable = $(document).scrollTop();
});

$( "#gachette" ).click(function() {
    $('html, body').animate({scrollTop:myVariable}, 10);
});

Do you have an idea why it doesn't work?

score 3 · Answer 1 · edited May 23 '17 at 12:12

3

make your variable global.

$( "#search" ).click(function() {
   myVariable = $(document).scrollTop(); //global variable remove var from starting
});

var makes your variable local to the scope.

or declare you variable outside

var myVariable;
$( "#search" ).click(function() {
   myVariable = $(document).scrollTop();
});

Read What is the scope of variables in JavaScript? and Variable Scope (JavaScript)

edited May 23 '17 at 12:12

Community

1
1

answered Nov 14 '13 at 16:27

Tushar Gupta - curioustushar

58,085
24
103
107

1

^^ Yeah, this will work :s Have a +1 to balance the silliness. – Reinstate Monica Cellio Nov 14 '13 at 16:30
Thanks, that's exactly what i"m looking for. I can't declare the variable outside, because i need to have the scroll position when the user click on #search. THANKS ! – Damien Nov 14 '13 at 16:39

score 1 · Answer 2 · answered Nov 14 '13 at 16:29

It's all about scope

var myVariable; // DEFINE OUTSIDE!

$( "#search" ).click(function() {
    myVariable = $(document).scrollTop(); // DON'T USE var HERE
});

$( "#gachette" ).click(function() {
    $('html, body').animate({scrollTop:myVariable}, 10);
});

score 0 · Answer 3 · answered Nov 14 '13 at 16:35

0

And without globals :

$("#search").on('click', function() {
    $("#gachette").data('scrollTop', $(window).scrollTop());
});

$("#gachette").on('click', function() {
    $('html, body').animate({scrollTop: $(this).data('scrollTop')}, 10);
});

answered Nov 14 '13 at 16:35

adeneo

312,895
29
395
388

Variable on two onclick action with jQuery

3 Answers3