title: I cannot find why this simple JS isn't working. (Sales Tax Calculator)
body: <p>My HTML is a simple entry form like this: </p>
  
  <pre><code>&lt;div id="taxCalc"&gt;
      &lt;label for="subtotal"&gt;Subtotal:&lt;/label&gt;
      &lt;input type="text" id="subtotal" &gt;
      &lt;span id="subtotal_message"&gt;Enter order subtotal&lt;/span&gt;&lt;br /&gt;
  
      &lt;label for="tax_rate"&gt;Tax Rate:&lt;/label&gt;
      &lt;input type="text" id="tax_rate" &gt;
      &lt;span id="tax_rate_message"&gt;Enter sales tax rate (99.9)&lt;/span&gt;&lt;br /&gt;
  
      &lt;label for="sales_tax"&gt;Sales Tax:&lt;/label&gt;
      &lt;input type="text" id="sales_tax" disabled &gt;&lt;br /&gt;
  
      &lt;label for="total"&gt;Total:&lt;/label&gt;
      &lt;input type="text" id="total" disabled &gt;&lt;br /&gt;
  
      &lt;label&gt;&amp;nbsp;&lt;/label&gt;
      &lt;input type="button" id="calculate" value="Calculate" onclick="calculate_click()"&gt;
      &lt;input type="button" id="clear" value="Clear" onclick="clear_click()"&gt;
  </code></pre>
  
  <p>And my JS is 2 simple functions...</p>
  
  <pre><code>    var subtotal, taxRate, salesTax, total;
  
  function setValues() {
      subtotal = document.getElementById("subtotal").value; 
      taxRate = document.getElementById("tax_rate").value; 
      salesTax = document.getElementById("sales_tax").value;  
      total = document.getElementById("total").value; 
  }
  
  function calculate_click() {
      setValues();
      salesTax = subtotal * taxRate / 100;
      total = subtotal + salesTax;
  
  }
  </code></pre>
  
  <p>I have included a JS Fiddle link for more information as well: <a href="http://jsfiddle.net/tjhillard/nkHxe/1/" rel="nofollow">http://jsfiddle.net/tjhillard/nkHxe/1/</a> 
  I want the sales tax and the total to display inside the appropriate fields when the "Calculate" button is clicked.  </p>
  
  <p>Thank you in advance for your help!</p>