Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The problem is here:</p> <pre><code>var inches = document.getElementById("inches").value; var height = (document.getElementById("feet").value * 12) + inches; </code></pre> <p>You are ending up concatenating the result of the calculation for <code>feet</code> with the string for <code>inches</code> (several type coercions are occurring here - from the value of the <code>feet</code> element to an integer for multiplication, then from the resulting integer to a string for concatenation with the <code>inches</code> string). </p> <p>You should use the correct types for these:</p> <pre><code>var inches = parseInt(document.getElementById("inches").value, 10); var height = (parseInt(document.getElementById("feet").value, 10) * 12) + inches; </code></pre> <p>I also suggest using <code>parseFloat</code> for the float types.</p> <p>This is a result of <em><a href="http://www.java2s.com/Tutorial/JavaScript/0040__Operators/ArithmeticOperators.htm" rel="nofollow">type coercion</a></em> in JavaScript.</p> <p>The <code>+</code> operator can be used to add two numbers together, but it will also concatenate strings (even if those strings contain only number values). If you try to <code>+</code> a string and a number, you get a string.</p> <p>For example...</p> <pre><code>var resultOfAdd = 34 + 12; // resultOfAdd equals 46 var resultOfAdd = "34" + "12"; // resultOfAdd equals "3412" ("34" and "12" are strings) var resultOfAdd = "34" + 12; // resultOfAdd equals "3412" (12 gets coerced into a string) var resultOfAdd = parseInt("34") + 12; // resultOfAdd equals 46! </code></pre> <p>It is very important to understand the difference between a string that contains numbers (e.g. <code>"42"</code>) and a number (e.g. <code>42</code>) in JavaScript. They are two different things.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload