CODEWITHSUNDEEP
javascripthtmlonchange
JKhan
JKhan

Reputation: 90

select value of <select> tags with the onchange(this.value)

I am trying to get the value of the selection on each change, I tried to log it to the console in my javascript but it doesn't work, this is some of the code from the problem... I am new to programming Please keep the answer simple... Thanks

function add(x) {
    var selection = x;
    console.log(x);
}
<select class="seletion" onchange="add(this.value)">
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
                <option value="d">D</option>
                <option value="e">E</option>
                <option value="f">F</option>
                <option value="g">G</option>
                <option value="h">H</option>
                <option value="i">I</option>
                <option value="j">J</option>
                <option value="k">K</option>
                <option value="l">L</option>
                <option value="m">M</option>
                <option value="n">N</option>
                <option value="o">O</option>
                <option value="p">P</option>
                <option value="q">Q</option>
                <option value="r">R</option>
                <option value="s">S</option>
                <option value="t">T</option>
                <option value="u">U</option>
                <option value="v">V</option>
                <option value="w">W</option>
                <option value="x">X</option>
                <option value="y">Y</option>
            </select>

Upvotes: 0

Views: 74

Answers (4)

gaetanoM
gaetanoM

Reputation: 42054

ANSWER UPDATE

Reading from HTMLSelectElement you can see a method:

add() Adds an element to the collection of option elements for this select element.

This is the function called and not yours.

Indeed, you can see this in the following example:

var opt1 = document.createElement("option");
opt1.value = "1";
opt1.text = "Option: Value 1";

function add (x) {
  var selection = x;
  console.log(x);
}
<select class="seletion" onchange="add(opt1);console.log('New option added at the end')">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    <option value="d">D</option>
    <option value="e">E</option>
    <option value="f">F</option>
    <option value="g">G</option>
    <option value="h">H</option>
    <option value="i">I</option>
    <option value="j">J</option>
    <option value="k">K</option>
    <option value="l">L</option>
    <option value="m">M</option>
    <option value="n">N</option>
    <option value="o">O</option>
    <option value="p">P</option>
    <option value="q">Q</option>
    <option value="r">R</option>
    <option value="s">S</option>
    <option value="t">T</option>
    <option value="u">U</option>
    <option value="v">V</option>
    <option value="w">W</option>
    <option value="x">X</option>
    <option value="y">Y</option>
</select>

The name of your function add is considered a different function from JS.

Change its name, for example, to add1 or call it as a global function attached to the window object:

function add1(x) {
  var selection = x;
  console.log('add1: ' + x);
}

function add(x) {
  var selection = x;
  console.log('window.add: ' + x);
}
<select class="seletion" onchange="add1(this.value);">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    <option value="d">D</option>
    <option value="e">E</option>
    <option value="f">F</option>
    <option value="g">G</option>
    <option value="h">H</option>
    <option value="i">I</option>
    <option value="j">J</option>
    <option value="k">K</option>
    <option value="l">L</option>
    <option value="m">M</option>
    <option value="n">N</option>
    <option value="o">O</option>
    <option value="p">P</option>
    <option value="q">Q</option>
    <option value="r">R</option>
    <option value="s">S</option>
    <option value="t">T</option>
    <option value="u">U</option>
    <option value="v">V</option>
    <option value="w">W</option>
    <option value="x">X</option>
    <option value="y">Y</option>
</select>



<select class="seletion" onchange="window.add(this.value);">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    <option value="d">D</option>
    <option value="e">E</option>
    <option value="f">F</option>
    <option value="g">G</option>
    <option value="h">H</option>
    <option value="i">I</option>
    <option value="j">J</option>
    <option value="k">K</option>
    <option value="l">L</option>
    <option value="m">M</option>
    <option value="n">N</option>
    <option value="o">O</option>
    <option value="p">P</option>
    <option value="q">Q</option>
    <option value="r">R</option>
    <option value="s">S</option>
    <option value="t">T</option>
    <option value="u">U</option>
    <option value="v">V</option>
    <option value="w">W</option>
    <option value="x">X</option>
    <option value="y">Y</option>
</select>

Upvotes: 2

Neha Kawadkar
Neha Kawadkar

Reputation: 21

Try this : Your code looks good to me but somehow function name add is not working, once i change the name of function it starts working, see working snippet

function showSelection(x) {
  alert(x);
}
    <select class="seletion" onchange="showSelection(this.value);">
                    <option value="a">A</option>
                    <option value="b">B</option>
                    <option value="c">C</option>
                    <option value="d">D</option>
                    <option value="e">E</option>
                    <option value="f">F</option>
                    <option value="g">G</option>
                    <option value="h">H</option>
                    <option value="i">I</option>
                    <option value="j">J</option>
                    <option value="k">K</option>
                    <option value="l">L</option>
                    <option value="m">M</option>
                    <option value="n">N</option>
                    <option value="o">O</option>
                    <option value="p">P</option>
                    <option value="q">Q</option>
                    <option value="r">R</option>
                    <option value="s">S</option>
                    <option value="t">T</option>
                    <option value="u">U</option>
                    <option value="v">V</option>
                    <option value="w">W</option>
                    <option value="x">X</option>
                    <option value="y">Y</option>
                </select>

Upvotes: 2

Ju66ernaut
Ju66ernaut

Reputation: 2691

Using in-line event handlers is not always the best idea. Why not try using the DOM API to handle this scenario?

Remove the 'onchange' handler in the <select> then add the following to your JS script

document.getElementsByClassName('seletion')[0].addEventListener('change', function(){      
  console.log(this.value);
});

Upvotes: 1

Banzay
Banzay

Reputation: 9470

Here is one more reliable solution

function addsel() {
    var selection = document.getElementById("sel1").value;
    console.log(selection);
}
<select id="sel1" class="seletion" onchange="addsel()">
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
                <option value="d">D</option>
                <option value="e">E</option>
                <option value="f">F</option>
                <option value="g">G</option>
                <option value="h">H</option>
                <option value="i">I</option>
                <option value="j">J</option>
                <option value="k">K</option>
                <option value="l">L</option>
                <option value="m">M</option>
                <option value="n">N</option>
                <option value="o">O</option>
                <option value="p">P</option>
                <option value="q">Q</option>
                <option value="r">R</option>
                <option value="s">S</option>
                <option value="t">T</option>
                <option value="u">U</option>
                <option value="v">V</option>
                <option value="w">W</option>
                <option value="x">X</option>
                <option value="y">Y</option>
            </select>

Upvotes: 1

Related Questions