Зависает браузер

[DjTarik]

Есть вот такой скриптик:

		onclick = function ()
			{
				StylisedFormFile();
			}

		function StylisedFormFile()
			{
				var form = document.getElementById('StylisedFormFile');	// form's id -->
				var array = form.elements;	// array of form's elements -->				
				for (var i = 0; i < array.length; i++)
					{
						var el = array[i];	// element -->

						if (el.type == 'file')	// only "input type='file'" -->
							{
								var wrap = el.parentNode;	// wrapper -->

								var block = '\
								<input type="text" name="#" value="' + el.title + '" readonly="readonly" id="ExtraInput" class="extra-input" />\
								<div class="extra-block">\
									<input type="file" name="' + el.name + '" value="" title="' + el.title + '" onchange="SetPathFile(this, \'ExtraInput\');" />\
								</div>\
								';
								wrap.innerHTML = block;
							}
					}

			}

Когда юзаю var block = "..." и innerHTML = зависает браузер. По идее - он просто зацикливается.

Если я напишу var block = "12345"; и wrap.innerHTML = block; - всё работает.

Что ему не нравится тут:

var block = '\
<input type="text" name="#" value="' + el.title + '" readonly="readonly" id="ExtraInput" class="extra-input" />\
<div class="extra-block">\
<input type="file" name="' + el.name + '" value="" title="' + el.title + '" onchange="SetPathFile(this, \'ExtraInput\');" />\
</div>\
';

Спасибо...

[DjTarik]

Неужели никто не подскажет?

[DjTarik]

Понял, в чём проблема.

Когда пытаюсь сделать вложенность

var block = '\
<input type="text" name="#" value="#" readonly="readonly" id="ExtraInput" class="extra-input" />\
<div class="extra-block">\
<input type="file" name="#" value="" title="#" onchange="SetPathFile(this, \'ExtraInput\');" />\
</div>\
';

Происходит зацыкливание.

Как поступают в таких случаях?

Когда нужно вставить заранее известный кусок кода?

Edited July 10, 2010 by DjTarik

[s0rr0w]

Понял, в чём проблема.

Когда пытаюсь сделать вложенность

var block = '\
<input type="text" name="#" value="#" readonly="readonly" id="ExtraInput" class="extra-input" />\
<div class="extra-block">\
<input type="file" name="#" value="" title="#" onchange="SetPathFile(this, \'ExtraInput\');" />\
</div>\
';

Происходит зацыкливание.

Как поступают в таких случаях?

Когда нужно вставить заранее известный кусок кода?

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

Решается примитивно.

for (var i = array.length; i--; ) ...

Edited July 10, 2010 by s0rr0w

[DjTarik]

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

Решается примитивно.

for (var i = array.length; i--; ) ...

Т.е. начать цикл с конца?

Попробую...

[s0rr0w]

Как это работает.

Допустим, есть следующий набор элементов: [ A, B, C ]

На каждой итерации мы вставляем дополнительные элементы.

1. [ A, D, B, C ]

2. [ A, D, E, B, C ]

3. [ A, D, E, F, B, C ]

4..

Таким образом мы видим, что цикл уйдет в бесконечность, так как каждый новый элемент попадает тут же в цикл.

Если делать в обратном порядке, то вновь созданные элементы будут оставаться позади текущего элемента цикла, и не будут попадать в обработку

3. [ A, B, C, D ]

2. [ A, B, E, C, D]

1. [ A, F, B, E, C, D ]

Все, цикл успешно завершен.

[DjTarik]

Как это работает.

Допустим, есть следующий набор элементов: [ A, B, C ]

На каждой итерации мы вставляем дополнительные элементы.

1. [ A, D, B, C ]

2. [ A, D, E, B, C ]

3. [ A, D, E, F, B, C ]

4..

Таким образом мы видим, что цикл уйдет в бесконечность, так как каждый новый элемент попадает тут же в цикл.

Если делать в обратном порядке, то вновь созданные элементы будут оставаться позади текущего элемента цикла, и не будут попадать в обработку

3. [ A, B, C, D ]

2. [ A, B, E, C, D]

1. [ A, F, B, E, C, D ]

Все, цикл успешно завершен.

Вроде всё получилось. =)

А это:

for (var i = array.length; i--; )

Как это "читается"? Вроде ж в цикле:

1. начальное значение.

2. условие

3. счётчик

Если чего-то не хватает - нужно оставлять пустым...

А тут всего-то 2 параметра.

[s0rr0w]

Как это "читается"? Вроде ж в цикле:

1. начальное значение.

2. условие

3. счётчик

Если чего-то не хватает - нужно оставлять пустым...

А тут всего-то 2 параметра.

То, что тут всего два параметра, не играет роли.

С точки зрения интерпретатора цикл for разворачивается в следующую последовательность

1. Инициализация

2. Проверка условия

3. Если условие ложно, выход

4. Выполнить тело цикла

5. Обновление счетчика

5. Переход к 2

Допустим, у нас есть всего два элемента массива

1. Присваиваем i=0.

2. i < 2?

3. да, 0 < 2

4. тело цикла

5. i = i + 1

--

6. i < 2?

7. да, 1 < 2

8. тело цикла

9. i = i + 1

--

10. i < 2?

11. нет, 2 = 2, но не меньше.

12. выход из цикла

А вот так работает обратный счетчик

1. Присваиваем i = 2

2. i > 0?; i = i - 1

3. Да, 2 > 0

4. тело цикла

5. счетчика нет, ничего не делаем

--

6. i > 0?; i = i - 1

7. Да, 1 > 0

8. тело цикла

9. счетчика нет

--

10. i > 0?; i = i - 1

11. Нет, 0 = 0

12. выход из цикла

Стоит заметить, что 0 при приведении к boolean равно false, а все остальное - true

И i-- сначала идет сравнивание, а потом уменьшение на единицу.

var i = 5

var a = i--

alert( a ); // 5

alert( i ); // 4