Отладка 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 обрабатывал числа как числа, а не как строки.

Answer 2

Параметры JavaScript нельзя вызывать так же, как вы вызываете элементы HTML.Чтобы вызвать

document.getElementById('roof_margin').value;

, необходимо присвоить 'roof_margin' элементу HTML-формы.

Answer 3

Убедитесь, что ваш код находится в функции загрузки.В противном случае, возможно, элементы еще не были загружены в DOM.

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

Answer 4

Возможно, у вас есть несколько элементов dom с одинаковым идентификатором? Помните, что идентификатор элемента dom должен быть уникальным. Я предлагаю вам использовать jquery для взаимодействия JavaScript с HTML.