CODEWITHSUNDEEP
javascript
Samiaviper
Samiaviper

Reputation: 7

return a variable from .click() javascript function

First of all excuse for my weak english, I try to use the following javascript code and I want to return id variable and use it in other function, but it seem does not work correctly and does not return it, can someone help me out writting this

var idcb = $('.box').click(function() {
    var id = $(this).attr('id');
    return id;
});

I want to use var idcb in this function :

$(".hs").click(function() {    
    $(idhs).slideToggle("slow");
        return false;
    });
});

Upvotes: 0

Views: 3404

Answers (8)

CBIII
CBIII

Reputation: 865

You could pass in the an object as a reference to the click function and change the value from the callback. Another option is using closures The caveat to this jsfiddle is that you have to call a .box element first.

http://jsfiddle.net/D6B73/2/

var idcb = {};
$('.box').click(idcb, function (event) {
        event.data.value = $(this).attr('id');
        console.log(idcb.value);
 });

$('.hs').click(function() {    
   $('#'+idbc.value).slideToggle("slow");  
});

Upvotes: 0

Michael Godden
Michael Godden

Reputation: 36

You are passing an anonymous function to an event handler, you cannot return a value from this type of function. The solution is to use closures to get around this :

var idcb = null;
$('.box').click(function() {
    idcb = $(this).attr('id');
});

The variable idcb will always be set to the id of the last .box that was clicked.

Upvotes: 1

Konstig
Konstig

Reputation: 135

Check this out

var id=null;
$('.box').click(function() {
    id = $(this).attr("id");
});

$(".hs").click(function() {
    $("#"+id).slideToggle("slow");
    return false;
});

Upvotes: 0

collapsar
collapsar

Reputation: 17238

your variable idcb contains the click handler !

you need to declare the vriable outside the handler and assign to it inside to make this work:

 var idcb = null;

 // ... whatever
 $('.box').click(function() {
     idcb = $(this).attr('id');

     return true; // return 'true' from an event handler to indicate successful completion
 });

Upvotes: 0

plalx
plalx

Reputation: 43718

You cannot do it the way you are trying to. However, what you can do is use a variable that is accessible by both functions to share values between them.

var icdb = 'test';

function a() {
    icdb = 'another value';
}

function b() {
    console.log(icdb);
}

a();
b();

You could also call b from a and pass the variable as argument:

function a() {
    b('test');
}

function b(icdb) {
    console.log(icdb);
}

a();

Upvotes: 0

Simone
Simone

Reputation: 21272

You can do it this way:

$(".hs").on('click', function() {
   var id = $('.box').attr('id');
   alert(id);
});

Upvotes: -1

Mike Corcoran
Mike Corcoran

Reputation: 14565

for that to work, the jquery click implementation would need to know that the function you pass it returns a value, and that it itself should return that value - which isn't the case.

instead, you could use some closure magic to do this easily. try this:

var idcb;
$('.box').click(function() {
    idcb = $(this).attr('id');
});

Upvotes: 2

Ben McCormick
Ben McCormick

Reputation: 25728

The function is given as a parameter to the click function and is run asynchronously when the user clicks on an element. So you can't return a value directly, since the function won't be run immediately. You can look up the id value another way, or pass it to a function to work with instead of returning it, or just do this:

var idcb = $('.box').click(function() {

   var id = $(this).attr('id');

   $(id).slideToggle("slow");
});

Upvotes: 0

Related Questions