Использование Javascript для автоматической генерации нескольких HTML-элементов одного типа на основе двухмерного массива атрибутов приводит к зависанию браузера

0

Я создал 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']
);
Теги:
arrays
multidimensional-array
dom

1 ответ

0
Лучший ответ

Прежде всего, в коде отсутствует [ отсутствует,

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/

  • 0
    Baaaaaaaaaaaaaaaaaaaaaa! Спасибо, высоко ценится. Какая куча ошибок муппет-нубов, забыв об основах видимости и роли 'var' в js. (пропущенный '[' был результатом копирования и вставки ошибки ... упс)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню