title: form input does not get saved in JavaScript function. Why?
body: <p>I can not find why this does not work. "document.getElementById("number").value" won't "return" in function..
  My HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="Currency_Converter.css"&gt;
      &lt;link rel="stylesheet"    href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/&gt; 
   &lt;/head&gt; 
   &lt;body&gt;
  
   &lt;div class="container"&gt;
   &lt;h1&gt;Currency Converter&lt;/h1&gt;
   &lt;form id="amount"&gt;Dollar amount &amp;ensp;$&lt;input id="number" type="number" name="number" onkeyup="getDollarAmount();" onchange="getDollarAmount();" placeholder="type dollar amount here" &gt;&lt;/form&gt;      
  &lt;/div&gt;     
  &lt;/body&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src="Currency_Converter.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My JavaScript:</p>
  
  <pre><code>function getDollarAmount() {
    var dollarAmount = document.getElementById("number").value;
      return (dollarAmount);
  } 
  console.log(getDollarAmount());
  </code></pre>
  
  <p>My "function getDollarAmount()" does not return the number put into the form. When I "console.log (dollarAmount)" I get my input. When I take out the "document.getElementById("number").value" and replace it with a number, (ex.: 5) the "getDollarAmount" function returns the number (5).</p>
  
  <p>Obviously, the issue is with "document.getElementById("number").value" since the function works in every other way. What do I need to do to get "document.getElementById("number").value" to be returned to "getDollarAmount()"? </p>