title: Pass HTML dropdown menu values to JavaScript function & onclick function call
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>The dropdown HTML:</p>
  
  <pre><code>e&lt;p&gt;&lt;span&gt;&lt;label for="metric-unit"&gt;Select metric unit&lt;/label&gt;&lt;/span&gt;
                      &lt;select name="metric" id="metric"&gt;
                          &lt;option value="cel"&gt;Celsius&lt;/option&gt;
                          &lt;option value="cm"&gt;Centimeters&lt;/option&gt;
                          &lt;option value="kg"&gt;Kilograms&lt;/option&gt;
                          &lt;option value="ml"&gt;Milliliters&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/p&gt;
  </code></pre>
  
  <p>My JavaScript function attempt to pass the value:</p>
  
  <pre><code>metricUnit = document.getElementById("metric").value;
  </code></pre>
  
  <p>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?</p>
  
  <p>Would it be</p>
  
  <pre><code>onlick ="convertMeasure()"
  </code></pre>
  
  <p>or</p>
  
  <pre><code>onclick = "convertMeasure(metric, numVal)"
  </code></pre>