current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I know that this question has been asked in several ways, but they have not helped me, and I'm getting an "undefined" error when I try to debug this.

It's simple: I have an HTML dropdown menu with several different metric units on it, and I have given each a value. I want to pass the selected value to a JavaScript function that will check the metric unit type and then convert it to a corresponding English unit.

The dropdown HTML:

e<p><span><label for="metric-unit">Select metric unit</label></span>
                    <select name="metric" id="metric">
                        <option value="cel">Celsius</option>
                        <option value="cm">Centimeters</option>
                        <option value="kg">Kilograms</option>
                        <option value="ml">Milliliters</option>
                    </select>
                </p>

My JavaScript function attempt to pass the value:

metricUnit = document.getElementById("metric").value;

My second question is on calling the conversion function. I want to do that once the metric unit is selected, and a number entered into a text field, and then the user clicks a submission button. Should I call the function with or without arguments, especially if I use getElementById to get the value of the metric unit and the number before any math occurs?

Would it be

onlick ="convertMeasure()"

or

onclick = "convertMeasure(metric, numVal)"
share|improve this question
    
Off topic: Your for attribute doesn't match the select's id. –  isherwood Apr 3 '14 at 18:04
    
Wondering whether the answers helped... –  T J Oct 30 '14 at 18:14

3 Answers 3

up vote 0 down vote

It seems like you're putting your click binding somewhere in the html like this

<div onclick='callThisFunction()'> Click on this div </div>

Then in your javascript, you can have that function. In it, you can get the selected value of the drop down list and do whatever logic you need.

<script>
   function callThisFunction() {
       var dropdown = document.getElementById("metric");
       var unit = dropdown.options[dropdown.selectedIndex].value;
       var nameOfUnit = dropdown.options[dropdown.selectedIndex].text;

       if (unit == "cm") {
           // do stuff
       } else if (unit == "ml") {
           // do stuff
       }
       // etc.
   }
</script>
share|improve this answer
up vote 0 down vote

First get your select element

var select = document.getElementById("metric");

and then you can go read the value from options with the selected index

var metric = select.options[select.selectedIndex].value;

As for how to call the convertMeasure() method I would suggest the first one if you are going to get values from multiple elements on the fly.

Here is a jsfiddle to play with http://jsfiddle.net/zEncN/

share|improve this answer
up vote 0 down vote

Assuming the id of submission buttons and text field are sub and txt respectively, and you've a default <option> like "choose unit" with value = 0:

var button= document.getElementById("sub");
 button.onclick= function(){
   var select= document.getElementById("metric");
   metricUnit = select[select.selectedIndex].value; //value selected in select
   val = document.getElementById("txt").value; // value entered in text field
   if(metricUnit!=0 && !isNaN(val)){ // make sure selected item is not default and the text in textbox is a number
     convertMeasure(metricUnit, val); // call your function
   }
 }
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.