Passing variables from multiple javascript functions to another?

Question

Have two dropdown lists where I'm attempting to pass the selected values for both to another function. Know the way I'm doing it isn't correct but been looking at it for so long can't see the probably simple solution.

  d3.select("#parameterType").on("change", function() 
    {
        var selectedParameter = this.value;
        console.log(selectedParameter);
        filterData(selectedParameter);
    });


    d3.select("#dateTimeTaken").on("change", function() 
    {   
        var selectedMonth = this.value;
        console.log(selectedMonth);
        filterData(selectedMonth)
    });


    function filterData(selectedParameter,selectedMonth)
    {
        console.log(selectedParameter);
        console.log(selectedMonth);
    }

Can anyone help point me in the right direction?

score 2 · Accepted Answer · answered Mar 02 '13 at 16:43

I suggest retrieving the selected values in the function you are trying to pass the parameters to. Something like this:

function filterData()
{
   var selectedParameter = document.getElementById("parameterType").value;
   var selectedMonth = document.getElementById("dateTimeTaken").value;
   console.log(selectedParameter);
   console.log(selectedMonth);
}

and call the function whenever any one of the selected values change.

d3.select("#parameterType").on("change", function() { filterData(); });

d3.select("#dateTimeTaken").on("change", function() { filterData(); });

score 1 · Answer 2 · answered Mar 02 '13 at 16:39

Try this approach:

Keep track of selectedParameter and selectedMonth outside of the function. In the onchange handlers, set the appropriate variable and then call the filterData function with no arguments. Then filterData checks if both variables are set and, if so, does something with them.

Code:

var filterData = (function () {
    var selectedParameter, selectedMonth;
    d3.select("#parameterType").on("change", function() 
    {
        selectedParameter = this.value;
        filterData();
    });

    d3.select("#dateTimeTaken").on("change", function() 
    {   
        selectedMonth = this.value;
        filterData();
    });

    function filterData()
    {
        if (selectedParameter === undefined || selectedMonth === undefined) {
            console.log("Both variables not set yet.");
            return;
        }
        console.log("Both variables are set!");
    }
    return filterData;
})();

I wrapped it in a closure so the variables don't leak into the global scope, and made the closure return the filterData function so it can be callable outside of just the closure.

Thank you Claudiu your approach worked perfectly too but can only accept one:) — Newbie, Mar 02 '13 at 17:33
no worries! GwynnBleidd's answer makes a lot more sense anyway. — Claudiu, Mar 02 '13 at 17:39

score 0 · Answer 3 · answered Mar 02 '13 at 16:38

0

make a global variable by changeing var selectedParameter = this.value; to just selectedParameter = this.value; with no var.

answered Mar 02 '13 at 16:38

Moussa Harajli

1,486
5
22
36

1

Globals are overkill. It's much easier to declare a local variable in the outer scope, where all three functions can see it. – DCoder Mar 02 '13 at 16:40
i guess your right but why are they overkills? im new to javascript. – Moussa Harajli Mar 02 '13 at 17:02
1

[Why are global variables considered bad practice?](http://stackoverflow.com/questions/10525582/why-are-global-variables-considered-bad-practice-javascript) – DCoder Mar 02 '13 at 17:04

Passing variables from multiple javascript functions to another?

3 Answers3