Storing Selected option as javascript variable

Question

I am trying to learn the onChange function. I grabbed this code and implemented it on my site and it is working, it actually shows the value of what the user has chosen but when I try to console log the variable in chrome it says: Uncaught ReferenceError: x is not defined. Why is that? Why is the variable not defined even after that I have chosen a car. And one more question. Is this javascript or Jquery?

The CODE

<!DOCTYPE html>
<html>
<body>

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction()">
    <option value="Audi">Audi
    <option value="BMW">BMW
    <option value="Mercedes">Mercedes
    <option value="Volvo">Volvo
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>

</body>
</html>

Not part of your question by your options have no close of the tag: <option value="Audi">Audi</option> — Mark Schultheiss
– Mark Schultheiss, Commented Feb 23, 2017 at 20:42

Mark Schultheiss · Accepted Answer · 2017-02-23 20:40:38Z

2

This is the JavaScript from your post.

If you do this:

function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "You selected: " + x;
    console.log("x:",x);
}

x is in the scope of the function and thus is available.

It is generally a bad practice to define variables like that in the global scope.

var x = {};
function myFunction() {
    x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "You selected: " + x;
 }
myfunction();// call it
console.log("x:",x);

Verbose version of this: (basically the same but explicit window on the objects) Note I added how to get the selected value.

window.x = {};

function myFunction() {
  window.console.log("in here");
  var selectElem = document.getElementById("mySelect");
  var optsCount = selectElem.options.length;
  var index = selectElem.selectedIndex;
  window.console.log("opts", optsCount, index);
  // return the value of the selected option
  window.console.log(selectElem.options[selectElem.selectedIndex].value)
  window.x = selectElem.options[selectElem.selectedIndex].value;
  document.getElementById("demo").innerHTML = "You selected: " + x;
}
window.myFunction(); // call it
window.console.log("x:", window.x);

Here is a fiddle of the last example:https://jsfiddle.net/MarkSchultheiss/bqwd784p/

No jQuery here just JavaScript.

edited Feb 23, 2017 at 20:40

answered Feb 23, 2017 at 20:03

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

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

1 Comment

Kaki Sami Over a year ago

Thank you very much for the describing answer. I learn a lot and made it work :-)

Ju66ernaut · Accepted Answer · 2017-02-23 20:01:47Z

2

Your variable is declared and assigned in the function scope. If you want it available outside of the function scope you need to declare it outside of the function

<script>
var x;
function myFunction() {
    x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>

It will be undefined until your function is triggered. This is plain vanilla JS using the DOM API.

edited Feb 23, 2017 at 20:01

answered Feb 23, 2017 at 20:00

Ju66ernaut

2,7013 gold badges29 silver badges36 bronze badges

3 Comments

Kaki Sami Over a year ago

I will try that. Thanks.

mechanicious Over a year ago

@KakiSami Optionally you can assign it globally from within the function with window.x = document.getElementById("mySelect").value ;

Kaki Sami Over a year ago

Thank you very much for the answer. I ended up declaring it on the fly and it then became global. "format = document.getElementById("format").value"

Collectives™ on Stack Overflow

Storing Selected option as javascript variable

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related