CODEWITHSUNDEEP
javascripthtml
Kaki Sami
Kaki Sami

Reputation: 187

Storing Selected option as javascript variable

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>

Upvotes: 1

Views: 2672

Answers (2)

Mark Schultheiss
Mark Schultheiss

Reputation: 34196

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.

Upvotes: 2

Ju66ernaut
Ju66ernaut

Reputation: 2691

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.

Upvotes: 2

Related Questions