Я создал 2 функции для создания элементов DOM. Первая строит один элементный узел, вставляет атрибуты на основе массива пар атрибут/значение, вставляет текстовый узел и помещает элемент в родительский. Эта функция отлично работает, за исключением тех случаев, когда вторая функция вызывает ее.
Вторая функция вызывает первую функцию для генерации нескольких элементов одного и того же типа и родителя, но с разными текстами и атрибутами (для генерации таких вещей, как li, option или p элементов). Эти параметры функции - это тип создаваемого элемента, родительский элемент, который должен быть добавлен, массив массивов, каждый из которых содержит пары значений атрибута, и массив строк для использования в текстовом узле (массив массивов и массив строк должен быть одинаковой длины). Количество созданных элементов основано на количестве массивов атрибутов.
Проблема в том, что когда вторая функция вызывает 1-й, она, похоже, повесила браузер.
Помощь и/или совет были бы высоко оценены.
Код, который я использовал:
function buildElement(type, txt, attr, parent){
element = document.createElement(type);
if(typeof attr != 'undefined' && attr){
for(i=0; i<attr.length; i=i+2){
element.setAttribute(attr[i], attr[i+1]);
}
}
if(typeof txt != 'undefined' && txt){
element.appendChild(document.createTextNode(txt));
}
if(typeof parent != 'undefined' && parent){
parent.appendChild(element);
}
return element;
}
function multiElements(type, parent, attrs, txts){
for(i=0; i<attrs.length; i++){
buildElement(type,txts[i],attrs[i],parent);
}
}
var x=1;
var local = buildElement('select','','name','local'+x,'onchange',
'selectPhUpdate(this.value)'],newCard);
multiElements('option',
local,
[
['value','auck'],
['value','chch'],
['value','dun'],
['value','ham'],
['value','mor'],
['value','nap'],
['value','nply'],
['value','wel']
],
['Auckland','Christchurch','Dunedin','Hamilton','Morrinsville',
'Napier','New Plymouth','Wellington']
);
Прежде всего, в коде отсутствует [
отсутствует,
var local = buildElement('select','','name','local'+x,'onchange',
'selectPhUpdate(this.value)'],newCard);
должно быть
var local = buildElement('select','',['name','local'+x,'onchange',
'selectPhUpdate(this.value)'],newCard);
Что касается самой проблемы: вы используете глобальные переменные для всего, даже для вашего счетчика циклов, - и вы использовали i
для счетчика циклов одновременно.
У вас есть две записи на втором уровне вашего массива attrs
которые вы передаете из multiElements
в buildElement
, поэтому у i
всегда есть значение 2
когда цикл над текущим массивом второго уровня в buildElement
завершен - и это означает, что цикл в multiElements
никогда не останавливается, потому что 2
всегда меньше, чем attrs.length
(что равно 8
)... и поэтому третий вариант для "Dunedin" создается снова и снова... и снова... снова.
Как только вы используете for(var i=0; …
для обеих ваших циклов, тем самым делая каждую i
локальной переменной в рамках соответствующей функции, она работает так, как ожидалось.
(element
в buildElement
должен быть локальным).
Посмотрите, как он работает с этими небольшими исправлениями в этой скрипке: http://jsfiddle.net/c7Pq3/1/