jQuery: How to use the return value from a function to another function

Question

I have this jquery scripts. I want to use the return value from the function stockArt() into function prod_actname() . It seems i'm missing something or my implementation is wrong. How could i possibly do that?

Another scenario is when StockArt() value is changed the Activity Name must be updated also.

Say Stock Art Color is green. and the Activity Name color also be updated to color green, without selecting the color green from prod_actname() function. It will automatically be change as the StockArt color is also change. They must be in the same color.

jQuery( document ).ready(function($) {
$('#preview_design').css("background-color","black");
$('#stock_art').change(function() {     
    var retVal = stockArt();
    $('#prod_actname').data("stockData", retVal);     
});

$('#prod_actname').change(function() {      
   var stockData = $('#prod_actname').data("stockData");
    prod_actname(stockData);
}); 


function stockArt()
{

    var returnValue = null;
    var selectStock_Art = $('#stock_art :selected').val();

        if(selectStock_Art == '31145-RB-emb')       
            { // green
                $('#stockArt_img').removeClass().addClass('stock_art_grbg1');           
            }
        else if(selectStock_Art == '33441-RB-emb1') 
            { // yellow
                $('#stockArt_img').removeClass().addClass('stock_art_yebg2');   
            }
        else if(selectStock_Art == '33441-RB-emb2') 
            { // gold
                $('#stockArt_img').removeClass().addClass('stock_art_gobg3');
            }
        else {
                $('#stockArt_img').removeClass();
            }

    returnValue = selectStock_Art;

return returnValue;

}


function prod_actname(stockData){

var StockArtResult = stockData;
    //User stockData as needed
    // assign the value to a variable, so you can test to see if it is working
    var selectActivity_Name = $('#prod_actname :selected').val();
    //alert(selectActivity_Name);

    if(selectActivity_Name == 'Baseball')
        {   
            $('#activityName_img').removeClass();

            if(stockArtValue == '31145-RB-emb'){

                $('#activityName_img').addClass('activity_name_GRbg1');
            }
            else if(stockArtValue == '33441-RB-emb1'){
                $('#activityName_img').addClass('activity_name_YEbg1');

            }else if(stockArtValue == '33441-RB-emb2') {
                $('#activityName_img').addClass('activity_name_GObg1');

            }

        }
    else if(selectActivity_Name == 'Basketball')
        {
            $('#activityName_img').removeClass();

            if(stockArtValue == '31145-RB-emb'){

                $('#activityName_img').addClass('activity_name_GRbg2');
            }
            else if(stockArtValue == '33441-RB-emb1'){
                $('#activityName_img').addClass('activity_name_YEbg2');

            }else if(stockArtValue == '33441-RB-emb2') {
                $('#activityName_img').addClass('activity_name_GObg2');

            }

        }
    else if(selectActivity_Name == 'Boys Basketball')
        {
            $('#activityName_img').removeClass();

            if(stockArtValue == '31145-RB-emb'){

                $('#activityName_img').addClass('activity_name_GRbg3');
            }
            else if(stockArtValue == '33441-RB-emb1'){
                $('#activityName_img').addClass('activity_name_YEbg3');

            }else if(stockArtValue == '33441-RB-emb2') {
                $('#activityName_img').addClass('activity_name_GObg3');
            }

        }
    else if(selectActivity_Name == 'Girls Basketball')
    {
        $('#activityName_img').removeClass();

        if(selectStock_Art == '31145-RB-emb'){

            $('#activityName_img').addClass('activity_name_GRbg4');
        }
        else if(selectStock_Art == '33441-RB-emb1'){
            $('#activityName_img').addClass('activity_name_YEbg4');

        }else if(selectStock_Art == '33441-RB-emb2') {
            $('#activityName_img').addClass('activity_name_GObg4');
        }

    }   

}

});

Answer 1

Use data attributes to store data for '#prod_actname' and later access it. You can leverage jQuery.data for this. Try this

jQuery( document ).ready(function($) {
    $('#preview_design').css("background-color","black");
    $('#stock_art').change(function() {     
        var retVal = stockArt();
        $('#prod_actname').data("stockData", retVal);     
    });

    $('#prod_actname').change(function() {      
       var stockData = $('#prod_actname').data("stockData");
        prod_actname(stockData);
    }); 


    function stockArt()
    {

        var returnValue = null;
        var selectStock_Art = $('#stock_art :selected').val();

            if(selectStock_Art == '31145-RB-emb')       
                { // green
                    $('#stockArt_img').removeClass().addClass('stock_art_grbg1');           
                }
            else if(selectStock_Art == '33441-RB-emb1') 
                { // yellow
                    $('#stockArt_img').removeClass().addClass('stock_art_yebg2');   
                }
            else if(selectStock_Art == '33441-RB-emb2') 
                { // gold
                    $('#stockArt_img').removeClass().addClass('stock_art_gobg3');
                }
            else {
                    $('#stockArt_img').removeClass();
                }

        returnValue = selectStock_Art;

    return returnValue;

    }

    var stockArtValue = stockArt();

    function prod_actname(stockData){
        //User stockData as needed
        // assign the value to a variable, so you can test to see if it is working
        var selectActivity_Name = $('#prod_actname :selected').val();
        //alert(selectActivity_Name);

        if(selectActivity_Name == 'Baseball')
            {   
                $('#activityName_img').removeClass();

                if(stockArtValue == '31145-RB-emb'){

                    $('#activityName_img').addClass('activity_name_GRbg1');
                }
                else if(stockArtValue == '33441-RB-emb1'){
                    $('#activityName_img').addClass('activity_name_YEbg1');

                }else if(stockArtValue == '33441-RB-emb2') {
                    $('#activityName_img').addClass('activity_name_GObg1');

                }

            }
        else if(selectActivity_Name == 'Basketball')
            {
                $('#activityName_img').removeClass();

                if(stockArtValue == '31145-RB-emb'){

                    $('#activityName_img').addClass('activity_name_GRbg2');
                }
                else if(stockArtValue == '33441-RB-emb1'){
                    $('#activityName_img').addClass('activity_name_YEbg2');

                }else if(stockArtValue == '33441-RB-emb2') {
                    $('#activityName_img').addClass('activity_name_GObg2');

                }

            }
        else if(selectActivity_Name == 'Boys Basketball')
            {
                $('#activityName_img').removeClass();

                if(stockArtValue == '31145-RB-emb'){

                    $('#activityName_img').addClass('activity_name_GRbg3');
                }
                else if(stockArtValue == '33441-RB-emb1'){
                    $('#activityName_img').addClass('activity_name_YEbg3');

                }else if(stockArtValue == '33441-RB-emb2') {
                    $('#activityName_img').addClass('activity_name_GObg3');
                }

            }
        else if(selectActivity_Name == 'Girls Basketball')
        {
            $('#activityName_img').removeClass();

            if(selectStock_Art == '31145-RB-emb'){

                $('#activityName_img').addClass('activity_name_GRbg4');
            }
            else if(selectStock_Art == '33441-RB-emb1'){
                $('#activityName_img').addClass('activity_name_YEbg4');

            }else if(selectStock_Art == '33441-RB-emb2') {
                $('#activityName_img').addClass('activity_name_GObg4');
            }

        }   

    }

});

Answer 2

One way is to store the output of the stockArt() in a variable and then pass that as an argument to the prod_actname(). For this, you would need to modify the function signature of the prod_actname() function to accept an argument. Something like this

var stockArtValue;
$('#stock_art').change(function() {     
    stockArtValue = stockArt();     
});

$('#prod_actname').change(function() {      
    prod_actname(stockArtValue);
}); 

function prod_actname(val){

 ....

}

For some cases, it might be useful to consider that the stockArtValue variable has indeed been changed. You can typically use another state variable to indicate. Alternatively, if you know the set of likely input values, then you initialize it with a value outside of that input value set and check against it.

Answer 3

You could save its value in a property...

jQuery( document ).ready(function($) {

var StockArtResult = null;

$('#stock_art').change(function() {     

    StockArtResult = stockArt();     
});

$('#prod_actname').change(function() {      

   if(StockArtResult != null)
   {        
       prod_actname(StockArtResult);
   }
});

});