Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Проблема с getElementsByTagName и циклом (https://javascript.ru/forum/events/58541-problema-s-getelementsbytagname-i-ciklom.html)

CraftLawrence 28.09.2015 13:58

Проблема с getElementsByTagName и циклом
 
Такая задача. Есть страница с неизвестным количеством форм (2+). Необходимо просто в каждую форму добавить input type="hidden".
Сознаю элемент:
var inp2 = document.createElement( 'input' );
	inp2.type = 'hidden';
	inp2.name = 'url';
	inp2.id = 'urlpage';
	inp2.value = location.href;

Пытаюсь добавить его к формам:
var forms = document.getElementsByTagName('form');
	for (var i = 0; i <= forms.length; i++) {
		forms[i].insertBefore(inp2, forms[i].firstChild);
	}

Выдает ошибку Cannot read property 'insertBefore' of undefined

А если вместо счетчика i вставлю цифру, к примеру 2, то для третьей формы это сработает.
var forms = document.getElementsByTagName('form');
	for (var i = 0; i <= forms.length; i++) {
		forms[2].insertBefore(inp2, forms[2].firstChild);
	}
В чем проблема счетчика i? Почему JS не принимает в качестве порядкового номера переменную?

ksa 28.09.2015 14:09

Цитата:

Сообщение от CraftLawrence
В чем проблема счетчика i?

Ты пытаешься один элемент пихать в разные формы... :)
Сколько форм - столько элементов и должно быть. А это либо клонирование... Либо создание...

CraftLawrence 28.09.2015 14:14

Цитата:

Сообщение от ksa (Сообщение 390000)
Ты пытаешься один элемент пихать в разные формы... :)
Сколько форм - столько элементов и должно быть. А это либо клонирование... Либо создание...

То есть, нужно перенести создание элемента внутрь цикла?
А как задать ему.."динамическое" имя? Чтобы на каждом шагу цикла имя было новое?
Или же лучше клонированием как-то?

CraftLawrence 28.09.2015 14:24

Попытался скопировать. Та же ошибка Cannot read property 'insertBefore' of undefined, которая ссылается на forms[i] в цикле.
var inp = document.createElement( 'input' );
	inp.type = 'hidden';
	inp.name = 'url';
	inp.className = 'urlpage';
	inp.value = location.href;
	var forms = document.getElementsByTagName('form');
	document.getElementsByTagName('form')[0].insertBefore(inp, forms[0].firstChild); // создаю элемент и вставляю в первую форму
	
	for (var i = 1; i <= forms.length; i++) {

		var newSelect = document.getElementsByClassName('urlpage')[0].cloneNode(true); // копирую элемент с первой формы по классу

		forms[i].insertBefore(newSelect, forms[i].firstChild); // пытаюсь вставить его во все следующие формы
	}

ksa 28.09.2015 14:26

Цитата:

Сообщение от CraftLawrence
То есть, нужно перенести создание элемента внутрь цикла?

Да. :yes:
Или делать там клонирование...
Цитата:

Сообщение от CraftLawrence
А как задать ему.."динамическое" имя? Чтобы на каждом шагу цикла имя было новое?

Можно "клеить" циферку... Порядковый номер номер формы.
Рандомно чего-то гоношить...
В самой форме иметь для этого "заготовку"...

Да мало ли еще как. :)
Цитата:

Сообщение от CraftLawrence
Или же лучше клонированием как-то?

Не суть важно. :no:
Как тебе удобнее будет...

CraftLawrence 28.09.2015 14:27

Аа, проблема была в условии i <= forms.length; цикла. Нужно было просто i < forms.length;
Простите за оверпостинг. Решил не удалять "свои размышления", чтобы загуглившие это могли найти решение для себя.

Спасибо, ksa

ksa 28.09.2015 14:30

CraftLawrence, вот как иллюстрация...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
form {
	border: 1px solid;
}
</style>
<script type='text/javascript'>
window.onload=function(){
	var of=document.getElementsByTagName('form');
	for (var i=0; i<of.length; i++) {
		var o=document.createElement('input');
		o.type='text';
		o.value=i;
		of[i].appendChild(o);
	};
}
</script>
</head>
<body>
<form></form>
<form></form>
<form></form>
<form></form>
<form></form>
</body>
</html>


Часовой пояс GMT +3, время: 18:04.