Javascript: Why is b1 considered undefined when o1 has a value and is equal to b1

Question

I've been trying to get variables to work with drop down options on a page. I was struggling to even get a value out of the function but managed by removing "var" from o1. Now if I type o1 into the js console on chrome i get a value for it but if I set another variable equal to it, such as b1, it comes out as undefined. I'd like to add if statements after the function using its output but they didn't work either. Not sure what i'm doing wrong...

<html>
<head>
<title>Options to variables</title>
</head>
<body>
<form>
Options
<select id="i1" onchange="options()">
    <option selected = "true" disabled="disabled">---</option>
    <option id="1">Option 1</option>
    <option id="2">Option 2</option>
</select><br>
</form>
</body>
<script>
var o1;
function options(){
    o1 = i1.options[i1.selectedIndex].id;
    return o1;
}
var b1 = o1;
</script>
</html>

You haven't called `options()` yet when the `b1` variable is assigned so it gets the still `undefined` value of `o1`. — Bergi, Aug 14 '17 at 11:20

Quentin · Accepted Answer · 2017-08-14T11:19:05.070

The statement var b1 = o1; is not inside the function.

When the page loads you copy the value undefined from o1 to b1.

When the change event fires, you write a new value to o1 but you never change b1, so it remains undefined.

Not sure what i'm doing wrong

Aside from the logic errors described above, your fundamental approach to the problem is wrong. You should read the value of the select element when you want to do something with that value.

You should not try to duplicate the information about what state it is in using a global variable. The state is reliably available from the original select element whenever you need it.

T.J. Crowder · Answer 2 · 2017-08-14T11:31:57.887

Some notes:

Your code is relying on the automatic globals created when elements have an id. That's generally a bad idea, there's a lot going on in the global namespace and conflicts are rife. Instead, look them up with document.getElementById.
Returning a value out of the function you call from an onxyz-attribute-style event handler is not useful (unless you return false, which would prevent the default action of the event). I suggest you look into modern event handling.
Your var b1 = o1; is outside of your options function, so it's run when the page loads. At that time, o1 is undefined, so of course b1 is undefined. o1 is given a different value later, when options is run, but that doesn't change b1.
Having ids on your option elements is unusual. The normal thing is to give them values. And if you do, you can use .value on the select to get its value.

Here's an example avoiding those issues, and showing the id of the selected option element (along with the select's value) in the console when you change it:

// A scoping function to avoid creating globals
(function() {
  // Get the select element
  var i1 = document.getElementById("i1");
  
  // Watch for `change`
  i1.addEventListener("change", function() {
    // Show the ID of the selected option, and the select's value
    console.log("ID: " + i1.options[i1.selectedIndex].id + ", value: " + i1.value);
  });
})();

<form>
Options
<select id="i1">
    <option selected = "true" disabled="disabled">---</option>
    <option id="1" value="one">Option 1</option>
    <option id="2" value="two">Option 2</option>
</select><br>
</form>

In fact, we can avoid using a variable for the select at all, since inside the event handler, the select box is available as this:

document.getElementById("i1").addEventListener("change", function() {
    // Show the ID of the selected option, and the select's value
    console.log("ID: " + this.options[this.selectedIndex].id + ", value: " + this.value);
});

<form>
Options
<select id="i1">
    <option selected = "true" disabled="disabled">---</option>
    <option id="1" value="one">Option 1</option>
    <option id="2" value="two">Option 2</option>
</select><br>
</form>

If you need to support obsolete browsers that don't have addEventListener, my answer to this other question has a function you can use.

Javascript: Why is b1 considered undefined when o1 has a value and is equal to b1

2 Answers2