Javascript getElementById не работает в моем цикле

76
9

У меня проблема с функцией, над которой я работаю. Цель этой функции - взять даты, которые находятся внутри двух наборов текстовых полей ввода, вычислить разницу между ними, а затем поместить это количество дней в третий набор ящиков. Моя функция показана ниже.

function daysBetween() {

for (var i = 0; i < 8; i++) {

//Get the value of the current form elements
var start = namestart[i];
var end = namend[i];
var out = names[i];

//Duration of a day
var d = 1000*60*60*24;

// Split Date one
var x = start.split("-");
// Split Date two
var y = end.split("-");

/// // Set Date one object
var d1 = new Date(x[0],(x[1]-1),x[2]);
// // Set Date two object
var d2 = new Date(y[0],(y[1]-1),y[2]);
//
// //Calculate difference
diff = Math.ceil((d2.getTime()-d1.getTime())/(d));

//Show difference
document.getElementById(out).value = diff;

}
}

Три массива, на которые ссылаются переменные в начале, содержат просто имена элементов формы, к которым я хочу получить доступ. Я тестировал переменные start, end и out с полем предупреждения, и цикл работает нормально, если у меня нет строки под комментарием Show Difference в коде. Я также прошел и убедился, что все имена совпадают, и они это делают. Кроме того, я вручную запускаю страницу восемь раз (есть восемь наборов ящиков) с каждым набором имен, и она успешно отображает "NaN" в поле "день" (у меня нет данных в исходных блоках, но пока что NaN является ожидаемым поведение).

Когда я запускаю функцию, как показано здесь, происходит то, что первый набор текстовых полей работает по назначению. Затем цикл останавливается. Поэтому мой вопрос довольно прост, почему цикл зависает с getElementById, даже если значение имени [0] работает, оно находит текстовое поле и помещает вычисленную разницу в поле. Текстовое поле для имен [1] не работает, и петля зависает.

Если вам нужен более подробный код моих текстовых полей, я могу его предоставить, но они следуют простому шаблону ниже.

// namestart[] array
<input type="text" name="start_date_one" id="start_date_one" value=""/> <br />
// namend[] array
<input type="text" name="end_date_one" id="end_date_one" value=""/> <br />
// names[] array
<input type="text" name="day_difference_one" id="day_difference_one" value=""/>

Спасибо за любую помощь заранее.

Изменение: замечая комментарии, которые, как я понял, добавлю определения массива для refernece. Они определяются непосредственно над функцией в моем файле calcdate.js.

var namestart = new Array ();
namestart[0] = "trav_emer_single_date_go";
namestart[1] = "trav_emer_extend_date_go";
namestart[2] = "allinc_single_date_go";
namestart[3] = "allinc_annual_date_go";
namestart[4] = "cancel_date_go";
namestart[5] = "visitor_supervisa_date_go";
namestart[6] = "visitor_student_date_go";
namestart[7] = "visitor_xpat_date_go";

var namend = new Array ();
namend[0] = "trav_emer_single_date_ba";
namend[1] = "trav_emer_extend_date_ba";
namend[2] = "allinc_single_date_ba";
namend[3] = "allinc_annual_date_ba";
namend[4] = "cancel_date_ba";
namend[5] = "visitor_supervisa_date_ba";
namend[6] = "visitor_student_date_ba";
namend[7] = "visitor_xpat_date_ba";

var names = new Array ();
names[0] = "trav_emer_single_days";
names[1] = "trav_emer_extend_days";
names[2] = "allinc_single_days";
names[3] = "allinc_annual_days";
names[4] = "cancel_days";
names[5] = "visitor_supervisa_days";
names[6] = "visitor_student_days";
names[7] = "visitor_xpat_days";

Я ссылаюсь на файл и вызываю свою функцию в своем заголовке как таковой:

<script type="text/javascript" src="calcdate.js"></script>
<script type="text/javascript">
window.onload = daysBetween;
</script>

спросил(а) 2012-11-21T01:11:00+04:00 7 лет, 6 месяцев назад
1
Решение
53

поскольку вы говорите out содержит имя, которое вы, возможно, захотите изменить

document.getElementById(out).value = diff;

в

document.getElementsByName(out)[0].value = diff;

или вы могли бы просто добавить атрибут id в свой html и установить его на то же значение, что и атрибут name и вы можете избежать изменения вашего javascript.

getElementById получает элемент по его атрибуту id, getElementsByName получает все элементы с указанным атрибутом имени и возвращает его как массив. В HTML-id предполагается уникальным, поэтому getElementById возвращает только один элемент

ответил(а) 2012-11-21T01:14:00+04:00 7 лет, 6 месяцев назад
64

Прежде всего, вы не можете ссылаться на объект по его идентификатору, когда он не имеет идентификатора.


<input type="text" id="start_date_one" name="start_date_one"/>

ответил(а) 2012-11-21T01:14:00+04:00 7 лет, 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема