Javascript 调试 - 脚本适用于硬编码变量，不适用于 getElementById ('id' ).value

Question

我正在尝试调试我编写的一些 javascript，但无法弄清楚为什么它不起作用。如果我对变量进行硬编码，它工作正常，但如果我使用 document.getElementById('id').value 获取变量，它会失败。

下面的示例工作正常，但一旦我取消对注释行的注释，它就不会了。在第二部分之前和之后打印变量，它们似乎是相同的。

真的不明白发生了什么。也许我只是想睡一觉，但如果有人有建议那就太好了!

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;

Answer 1

您是否要添加文本框中的数字？由于 JavaScript 变量类型系统的工作方式(结合 + 运算符的重载)，2 + 2 === 4 (添加数字)但 ' 2' + '2' === '22'(字符串连接)。尝试将行更改为，例如:

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

或者:

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

这将确保 JavaScript 将数字视为数字而不是字符串。