Trouble getting a Javascript function to run

Question

I am still fairly new to Javascript and I am having some trouble getting a function to run properly. Here is what I have:

<script type='text/javascript'> 
 function GravityCalc (ratio, name)
 {
 Weight = getElementById('WeightBox').value * ratio;
 document.getElementById('WeightText').innerHTML = 'You would weigh ' + weight + ' on ' + name;
 }
</script>
Enter Weight: <input type='text' id='WeightBox' name='Weight'><br>
<button onclick='GravityCalc(2.3,Jupiter)'>calculate</button>
<div id='WeightText'> </div>

The form displays perfectly, but nothing happens when the button is pressed. It also should probably be noted that eventually, the name and ratio parameters is going to be parsed in with PHP.

• JJJ: Look in the JavaScript error console. You'll see the errors there. (Hint: strings must be enclosed in quotes.)

Answer 1

You have a couple things wrong...

1. 'Weight' should be 'weight'. JS is case sensitive, and you had it in Camel case in one line and Pascal case in another line.
2. You need to use 'document.getElementById'. Just 'getElementById' doesn't work in all browsers.
3. You need to declare the 'Weight' variable.
4. The value in a dom element is stored as a string or char array if you will, thus you need to parse it to an int, like so, parseInt(document.getElementById('WeightBox').value)

Here's my JSFiddle... http://jsfiddle.net/EH5j6/

function GravityCalc (ratio, name)
 {
 var weight;
 weight = parseInt(document.getElementById('WeightBox').value) * ratio;
 document.getElementById('WeightText').innerHTML = 'You would weigh ' + weight + ' on ' + name;
 }

• Niet the Dark Absol: The second argument to weight is NOT optional. Enter 08 in certain browsers to understand why.
• Justin Russo: Not sure I understand what you just said.
• steveax: Justin, I believe @NiettheDarkAbsol is referring to the radix parameter in parseInt. Omitting it can lead to unexpected results.
• James - not really a pirate: This did the trick. Thank you. I like the numbered list, it helped a lot (though all of the answers are good). I am learning Javascript as I go so I like being able to see all the things I need to be doing better. Also, I feel dumb about not noticing the case change in weight.
• Justin Russo: You're absolutely welcome. Thanks for the vote up as well. :)

Answer 2

javascript variables are case sensitive! Your Ws didn't match up. I also highly recommend using var to explicitly declare your variables.

 var weight = getElementById('WeightBox').value * ratio;
 document.getElementById('WeightText').innerHTML = 'You would weigh ' + weight + ' on ' + name;

plus, as a commenter noted, strings must be enclosed by quotes.

<button onclick='GravityCalc(2.3,"Jupiter")'>calculate</button>

Answer 3

Make sure that you include the javascript in the head of the html page.

 function calc (ratio, name) {
 var weight = document.getElementById('WeightBox').value * ratio;
 document.getElementById('WeightText').innerHTML = "You would weigh " + weight + " on " + name;
 }

and change the HTML to be:

Enter Weight: <input type='text' id='WeightBox' name='Weight'><br>
<button onclick="calc(2.3, 'Jupiter')">calculate</button>
<div id='WeightText'> </div>