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);
    }
  });
});

Rory McCrossan · Accepted Answer · 2019-06-17 10:20:21Z

2

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...
  }
});

edited Jun 17, 2019 at 10:20

answered Jun 17, 2019 at 10:16

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Njonjo Kiroga Over a year ago

Oh, I see what I did wrong. Thank you very much. It works.

Rory McCrossan Over a year ago

Glad to help. I've updated the answer with a more unified approach to the problem.

Njonjo Kiroga Over a year ago

I like the updated answer, it is even easier to follow.

Nitin Daddikar · Accepted Answer · 2019-06-17 10:17:25Z

0

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

answered Jun 17, 2019 at 10:17

Nitin Daddikar

3455 silver badges12 bronze badges

Comments

Guja1501 · Accepted Answer · 2019-06-17 10:26:22Z

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);
    }
  });
});

Vintage Coders · Accepted Answer · 2019-06-17 10:29:48Z

0

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);
    }
  });
});

answered Jun 17, 2019 at 10:29

Vintage Coders

1521 silver badge4 bronze badges

Collectives™ on Stack Overflow

Using variable outside of a javascript function

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related