CODEWITHSUNDEEP
javascriptjqueryfunctionreturn-valuejavascript-framework
Michel Joanisse
Michel Joanisse

Reputation: 460

jquery - returning a value from function

say I have the following function:

function checkPanes() {
    activePane = '';
    var panels = $("#slider .box .panel");

    panels.each(function() {

    //find the one in visible state.
    if ($(this).is(":visible")) {
    activePane = $(this).index()+1;
    console.log(activePane);
    }

    });
} //END checkPanes();

Ideally, I'd like to call on this function elsewhere (most likely from another function), and retrieve the value I am currently outputting to console.

(example ..) 

function exampleCase() {
    checkPanes(); //evidently, does not return anything. 
    //Ideally, I want the numerical value, being output to console in above function.
}

Thanks in advance! All suggestions / comments are well appreciated.
Cheers

Upvotes: 0

Views: 35059

Answers (7)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

you have to return something inside the first function to manipulate it inside the second:

function checkPanes() {
    activePane = '';
    var panels = $("#slider .box .panel");
    //create a return array
    visiblePanels = [];
    panels.each(function() {

    //find the one in visible state.
    if ($(this).is(":visible")) {
    activePane = $(this).index()+1;
    //add the result to the returnb array
    visiblePanels[] = activePane
    }
    });
    // return results
    return visiblePanels;
}

function exampleCase() {
    var thepane = checkPanes();
    //now it has all the visible panels that were founded in the other function
    // you can access them with thepane[0] or iterate on them

}

I think this is what you need.

Upvotes: 0

lsuarez
lsuarez

Reputation: 4992

Forget everyone who says return activePane since they didn't see it's in a jQuery each loop. Won't work.

I'd suggest restructuring your selector. The selector you should be using is: $("#slider .box .panel:visible"). This will cut out your each loop entirely. For instance you could restructure the code as follows:

function checkPanes() {
    return $("#slider .box .panel:visible").index();
}

function exampleCase() {
    var visiblePane = checkPanes();

    // ... do something with the index
}

I'd suggest just using the selector in-line rather than making a new function, but that's a matter of taste, especially if you have to select the same thing in multiple places.

Upvotes: 2

Piotr Kula
Piotr Kula

Reputation: 9811

You can keep your code and just add a return if you want to use the values somewhere else

function checkPanes() {
 activePane = '';
 var panels = $("#slider .box .panel");

  panels.each(function() {

  //find the one in visible state.
  if ($(this).is(":visible")) {
  activePane = $(this).index()+1;
  console.log(activePane); //Logs to console.
  return activePane; //Returns value also.
}

});
}

So in here you can either use the returned value or just have it log to console. Thats how i understood your question

function exampleCase() {
    checkPanes(); //Now it will still write in console. but you dont need to use the return

    alert(checkpanes()); //Would write it to console and to an alert!
}

But make sure you return string - or convert to string if you want to disaply it somewhere as text.

Upvotes: 0

Jacob Mattison
Jacob Mattison

Reputation: 51052

Just noticed the loop; looks like what you may want to return is an array of all active panels (since in theory there could be more than one). 

function checkPanes() {
    activePanes = [];
    var panels = $("#slider .box .panel");

    panels.each(function() {

    //find the one in visible state.
    if ($(this).is(":visible")) {
    activePane.push($(this).index()+1);
    console.log(activePane);
    }

    });
    return activePanes;
}

If you know there will only ever be one active, you can go back to your original approach and just add return activePane after the console.log.

Upvotes: 4

ADW
ADW

Reputation: 4070

This:

function checkPanes() {
  activePane = '';
  var panels = $("#slider .box .panel");

  panels.each(function() {

  //find the one in visible state.
  if ($(this).is(":visible")) {
  activePane = $(this).index()+1;
  }

  });
  return activePane;
} //END checkPanes();

and this:

function exampleCase() {
   var myval=checkPanes(); //evidently, does not return anything. 
   console.log(myval);

}

Upvotes: 0

pixelbobby
pixelbobby

Reputation: 4440

I think it's as easy as using return activePane;

Upvotes: 0

n00dle
n00dle

Reputation: 6043

Just switch your console line to a return statement:

function checkPanes() {
    activePane = '';
    var panels = $("#slider .box .panel");

    panels.each(function() {

    //find the one in visible state.
    if ($(this).is(":visible")) {
        activePane = $(this).index()+1;
        return activePane; // Return the value and leave the function
    }

    });
} //END checkPanes();

To call:

function exampleCase() {
    var thepane = checkPanes(); //evidently, does not return anything. 
    // ...
}

Upvotes: 0

Related Questions