Javascript debugging - script works with hard coded variable, not with getElementById('id').value

I'm trying to debug some javascript I wrote and can't figure out why it's not working. If I hard code the variables it works fine, but if I use document.getElementById('id').value to get the variable it fails.

The example below works fine but as soon as I un-comment the commented lines it doesn't. Printing the variables before and after the 开发者_Python百科second section they seem to be identical.

Really don't get what's going on. Maybe I just need to sleep on it, but if anyone's got suggestions that would be great!

roof_width = 5;
roof_depth = 3;
panel_width = 2;
panel_depth = 1;
panel_power = 200;
roof_margin = 0.100;
panel_gap = 0.05;

roof_width = document.getElementById('roof_width').value;
roof_depth = document.getElementById('roof_depth').value;
// panel_width = document.getElementById('panel_width').value;
// panel_depth = document.getElementById('panel_depth').value;
panel_power = document.getElementById('panel_power').value;
// roof_margin = document.getElementById('roof_margin').value;
panel_gap = document.getElementById('panel_gap').value;

Are you trying to add numbers that are in text boxes? Because of the way JavaScript's variable typing system works (combined with the overloading of the + operator), 2 + 2 === 4 (adding numbers) but '2' + '2' === '22' (string concatenation). Try changing the lines to, for example:

panel_width = parseFloat(document.getElementById('panel_width').value);

or alternatively:

panel_width = Number(document.getElementById('panel_width').value);

This will ensure that JavaScript treats the numbers as numbers rather than as strings.

JavaScript parameters can't be called in the same way that you're calling HTML elements. In order to call

document.getElementById('roof_margin').value;

you need to assign 'roof_margin' to an HTML form element.

Pherhaps you have multiple dom elements with the same id? Remember the dom element ID must be unique. I suggest you to use jquery for interacting javascript with html.

Make sure your code is in an onload function. Otherwise the elements may not have been loaded into the DOM yet.

window.onload = funciton(){/* code here */};