 <p>Note <code>change</code> event fires after the <code>input</code> loses focus. You may want to use <code>input</code> event instead.</p> <p>To convert the string to numbers, you can use the unary operator <code>+</code> instead of <code>Number</code>.</p> <p>To default to <code>0</code> when some expression is falsy, you can use <code>expr || 0</code>.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var field1 = document.getElementById('field1'), field2 = document.getElementById('field2'), total = document.getElementById('total'); field1.oninput = field2.oninput = function updateTotalCosts() { total.value = (+field1.value || 0) + (+field2.value || 0); };</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="field1" /&gt; + &lt;input id="field2" /&gt; = &lt;input id="total" /&gt;</code></pre> </div> </div> </p> <p>Or, using jQuery,</p> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var $field1 = $('#field1'), $field2 = $('#field2'), $total = $('#total'); $field1.add($field2).on('input change', function updateTotalCosts() { $total.val((+$field1.val() || 0) + (+$field2.val() || 0)); });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt; &lt;input id="field1" /&gt; + &lt;input id="field2" /&gt; = &lt;input id="total" /&gt;</code></pre> </div> </div> </p>