access var outside function scope

Question

I havethe following code and I'm trying to access selectedBrand var outside so to use it elsewhere in may code

var selectedBrand;
var brand_sel = d3.select('select')
    .on("change",function(b) {
        selectedBrand = d3.select("#brand").node().value;
    });

  console.log(selectedBrand)

when I try to consollog selectedBrand I get undefined results.

I try almost everything I understand without success

many thanks for any help

Answer 1

You are trying to log it's value immediately but it will remain undefined until after your change handler has been executed:

Does below help illustrate?

var selectedBrand;
var brand_sel = d3.select('select')
   .on("change",function(b){
      selectedBrand = d3.select("#brand").node().value;
      run();
   })

var run = function() { console.log(selectedBranch); } // <- this runs after you've defined the value because you've called `run()` in your change handler
console.log(selectedBrand); // <- this runs first, while the value is undefined

This feels like the age old How do I return the response from an asynchronous call?

Answer 2

just invoke your function brand_sel() .
Because right now you have only defined it, but never actually invoked it, hence it never fired and selectedBrand remains undefined.

Also that's some dirty dirty scoping that I would not want to deal with in my code. In general what you're doing is a bad pattern that will lead to bugs down the road. Start using const / let instead to avoid issues with scoping and in general try to keep the scope clean - this can easily be a function return , rather than directly mutating a variable through a function call.

At the very least, "use strict"; on the top of your code might be a good idea.

Overall, without meaning to sound condescending, it looks like you're developing some "not so good" practices. There's a lot of good tutorials on the web or even book that do teach JS "the proper way". I know it may sound like I'm bashing you, but trust me, it will be worth it in the long run, if you don't feel like spending 3 hours debugging why are not your values updating properly in loops and whatnot.

Answer 3

first of all thanks for the replay. I'm quite new to javascript and I'm learning by doing. Probably I totally misunderstand js logic some where.

Anyway, probably I'll share the wrong request hoping it should solve my issue. Coming back to the issue as it was at the beginning.

Let's say that I have a var like this

    var filteredMedia =nest1.filter(function(d) {
  return d.key == brand_sel})[0]

where brand_sel must be updated both on page load and on change.

brand_sel is the value of the selected option of a dropdown.

using this code

    function update() {
   var brand_sel = d3.select("#brand").node().value
  return brand_sel;
}
var brand_sel = update();

console.log(update())

everything works on page load.

Now I'm trying to run update function also on change in the following way but of course I'm still missing to understand somthing

d3.select('select').on("change", function(){
  update();
});