CODEWITHSUNDEEP
javascriptselectonchange
aldin_abdagic
aldin_abdagic

Reputation: 79

Why select returns only the first value?

There are two values in function. Input and select, everything works normally except that the select returns the first value (px). Where did I get it wrong?

<input id="width" onchange="Width()" type="number" placeholder="0" min="" max="" step="0.1">

<select id="widthpixselpercentage" onchange="Width()" >
<option value="px">px</option>
<option value="%">%</option>
</select>

<div id="someDiv"></div>

function Width(){
var x = document.getElementById("width").value;
var y = document.getElementById("widthpixselpercentage").value;
        document.getElementById(someDiv).style.width = x + y;

}

Upvotes: 0

Views: 1467

Answers (2)

The KNVB
The KNVB

Reputation: 3844

You may refer to the following sample code:

function Width(vv)
{
	alert(vv.value);
}
<input id="width" onchange="Width(this)" type="number" placeholder="0" min="" max="" step="0.1">

<select id="widthpixselpercentage" onchange="Width(this)" >
<option value="px">px</option>
<option value="%">%</option>
</select>

<div id="someDiv"></div>

Upvotes: 0

Maths RkBala
Maths RkBala

Reputation: 2195

If you want value from select box by using javascript:

var select_box = document.getElementById("widthpixselpercentage");
var y = select_box.options[select_box.selectedIndex].value;

If you want text from select box by using javascript:

var select_box = document.getElementById("widthpixselpercentage");
var y = select_box.options[select_box.selectedIndex].text;

Please try the following: 

function Width(){
var x = document.getElementById("width").value;
var select_box = document.getElementById("widthpixselpercentage");
var y = select_box.options[select_box.selectedIndex].value;
        document.getElementById("someDiv").style.width = x + y;

}
#someDiv{
border:1px solid;
height:5px;
}
<input id="width" onchange="Width()" type="number" placeholder="0" min="" max="" step="0.1">

<select id="widthpixselpercentage" onchange="Width()" >
<option value="px">px</option>
<option value="%">%</option>
</select>

<div id="someDiv"></div>

Upvotes: 1

Related Questions