Using variable outside of a javascript function

Question

I am redesigning the select dropdown of a site and I am using a jQuery plugin called ddSlick. However, I can't seem to capture a variable I need outside its function.

In the code below I can't seem to have the second console.log(build) show what I get in the first console.log(build) . I get undefined . What could I be doing wrong?

$(document).ready(function() {
  $("#demo-htmlselect").ddslick({
    width: 300,
    selectText: "Select an item",
    onSelected: function(buildings) {
      let build = buildings.selectedData.value
      console.log(build);
    }
  });

  $("#demo").ddslick({
    width: 300,
    selectText: "Select an item",
    onSelected: function(noises) {
      let nois = noises.selectedData.value
      console.log(nois)
      console.log(build);
    }
  });
});

Answer 1

You need to define the build variable in scope of both functions:

$(document).ready(function() {
  let build; // define here

  $("#demo-htmlselect").ddslick({
    width: 300,
    selectText: "Select an item",
    onSelected: function(buildings) {
      build = buildings.selectedData.value;
      console.log(build);
    }
  });

  $("#demo").ddslick({
    width: 300,
    selectText: "Select an item",
    onSelected: function(noises) {
      let nois = noises.selectedData.value
      console.log(nois)
      console.log(build);
    }
  });
});

An important note here is that this logic relies on #demo-htmlselect triggering a change event before #demo does. As such, you may need to write some validation logic to deal with this restriction.

With that in mind I would suggest combining the event handlers in to one and checking the state of both dropdowns in there, something like this:

$(document).ready(function() {
  $("#demo, #demo-htmlselect").ddslick({
    width: 300,
    selectText: "Select an item",
    onSelected: doSomething
  });

  function doSomething() {
    let build = $('#demo-htmlselect').val();
    let noise = $('#demo').val();

    // validate both variables have values here...

    // execute whatever business logic is required based on the user input here...
  }
});

Answer 2

You have declared build in different context. That is why it is not accessible. Make build variable global it will work

Answer 3

let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

You need to declare variable in scope where you want to use it. lets declare variable in ready closure like this:

$(document).ready(function() {
  let build;

  $("#demo-htmlselect").ddslick({
    width: 300,
    selectText: "Select an item",
    onSelected: function(buildings) {
      build = buildings.selectedData.value
      console.log(build);
    }
  });

  $("#demo").ddslick({
    width: 300,
    selectText: "Select an item",
    onSelected: function(noises) {
      let nois = noises.selectedData.value
      console.log(nois)
      console.log(build);
    }
  });
});

Answer 4

the following code will create the global state by using window object which is use to store data globally and we can use window object in any function.

window.build = "";
window.nois = "";
$(document).ready(function() {
  $("#demo-htmlselect").ddslick({
    width: 300,
    selectText: "Select an item",
    onSelected: function(buildings) {
      window.build = buildings.selectedData.value
      console.log(window.build);
    }
  });

  $("#demo").ddslick({
    width: 300,
    selectText: "Select an item",
    onSelected: function(noises) {
      window.nois = noises.selectedData.value
      console.log(window.nois)
      console.log(window.build);
    }
  });
});