multiple vars not working in Javascript

Question

I'm trying to take a height given in feet and inches and convert it to inches (eg. 6'1" would be 73"). When I only have one select box (the feet box) I can successfully convert it to inches. But when I add the 'inches' variable and try to add it to the converted 'feet' variable nothing happens.

Here's the script:

<script type="text/javascript" language="javascript">

function Calculate() {

    var feet = document.getElementById("feet").value;
    var inches = document.getElementbyId("inches").value;

    height = ((feet*12) + inches);

    document.write ('This is your height in inches:<b>   ' + height.toFixed(0) + '</b><br>');
}


</script>

And the HTML:

<div class="form">
Height:
<select id="feet">
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
</select>

<select id="inches">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
</select>
<br />
<input type="submit" value="Calculate" onclick="Calculate()" />

Thanks in advance

You also have a typo in your code, it's getElementById with a capital B. — João Silva
– João Silva, Commented Aug 23, 2012 at 0:16

Niet the Dark Absol · Accepted Answer · 2012-08-23 00:15:55Z

3

feet and inches are strings, so + concatenates. Multiplying casts feet to an integer, so your result for 6'1" would be 721 (72+"1")

You should convert to integers manually:

feet = parseInt(feet,10);
inches = parseInt(inches,10);

EDIT: Also, as João pointed out, you mis-capitalised getElementById on the second one.

answered Aug 23, 2012 at 0:15

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1618377 Over a year ago

Thanks! I figured it was something simple like that.

Peter Olson · Accepted Answer · 2012-08-23 00:17:43Z

1

There are two problems.

First, in this line

var inches = document.getElementbyId("inches").value;

You forgot to capitalize the b. It should be getElementById.

Also, inches comes from a textbox, which means it's a string, so

height = ((feet * 12) + inches);

will also be a string because + is also a string concatenation operator. Since it's a string, it means that there is no toFixed method in its prototype.

You can fix this by passing the string to Number or prepending a + to make it a number, like this:

height = Number((feet * 12) + inches);
//OR
height = +((feet * 12) + inches);

answered Aug 23, 2012 at 0:17

Peter Olson

144k49 gold badges209 silver badges250 bronze badges

Comments

locrizak · Accepted Answer · 2012-08-23 00:14:56Z

0

you should be wrapping the the values of feet and inches in the parseInt function to ensure it is an integer.

When using the input type='submit' it has different behaviors than regular inputs with type='button' so you either need to change the type to button or put a return false at the end of your calculate function

answered Aug 23, 2012 at 0:14

locrizak

12.3k12 gold badges63 silver badges81 bronze badges

Comments

ZombieCode · Accepted Answer · 2012-08-23 00:30:04Z

0

I know this might be a little late, but I threw this into jsFiddle and cleaned up the JS code a little (I swapped it over to jQuery for kicks). It might be worth checking out.

example - jsFiddle

answered Aug 23, 2012 at 0:30

ZombieCode

1,6583 gold badges25 silver badges49 bronze badges

Collectives™ on Stack Overflow

multiple vars not working in Javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related