Javascript math different to what I thought it should be
<p>Just wondering if someone knows what is wrong with my javascript math script below:</p>

<pre><code>var new_total = (document.getElementById('qty').value * document.getElementById('pricepermetre').value) + document.getElementById('delivery').value
</code></pre>

<p>Basically it should be (1 x 10) + 2 = 12</p>

<p>But the script above is adding the delivery value to the end like (1 x 10) + 2 = 102</p>

<p>Here is the the full test page:</p>

<pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;TEST&lt;/title&gt;
    &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" rel="Stylesheet" /&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
    &lt;table class="mytable"&gt;
      &lt;tr&gt;
        &lt;td&gt;QTY:&lt;/td&gt;
        &lt;td&gt;&lt;input name="qty" type="text" id="qty" style="width:70px;" value="0" maxlength="9" /&gt;
          KG &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;PRICE PER KG (EX TAX):&lt;/td&gt;
        &lt;td&gt;$
          &lt;input name="pricepermetre" type="text" id="pricepermetre" style="width:70px;" value="0" maxlength="9" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;DELIVERY FEE (EX TAX):&lt;/td&gt;
        &lt;td&gt;$
          &lt;input name="delivery" type="text" id="delivery" style="width:70px;" value="0" maxlength="9" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;TOTAL (EX TAX):&lt;/td&gt;
        &lt;td&gt;&lt;span id="totalpricespan"&gt;$0&lt;/span&gt;
          &lt;input name="totalprice" type="hidden" id="totalprice" style="width:70px;" value="0" maxlength="9" /&gt;
          &lt;span style="color:#999;"&gt;(qty x price per kg + delivery fee)&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&amp;nbsp;&lt;/td&gt;
        &lt;td&gt;&lt;input type="button" name="WorkOutTotals" id="WorkOutTotals" value="Work Out Totals" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;script type="text/javascript"&gt;
    $(document).ready(function(){

    $('#WorkOutTotals').click( function() {

        //work out new total
        var new_total = (document.getElementById('qty').value * document.getElementById('pricepermetre').value) + document.getElementById('delivery').value

        $("#totalprice").val(new_total);
        $("#totalpricespan").html('$' + new_total);

    });

    });
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>

<p>Thanks in advance ;)</p>
