Этот JavaScript-код сбивает мой браузер

Question

Привет, у меня есть этот JavaScript, который добавляет текстовое поле, когда пользователь нажимает кнопку.Текстовое поле затем добавляется на веб-страницу DOM.

Однако теперь оно, похоже, не останавливается и попадает в бесконечный цикл.

В цикле используется

GetElementsbyTagName

и сколько существует ограничения, но ранее он работал нормально.

//add rows function
window.onload=function()
{

s=5; //for staff
n=20; //for events

//sets at default incase no js rows created
var staffbox = document.getElementById('staffcounter');
                    staffbox.value = s;

var eventsbox = document.getElementById('eventscounter');
                    eventsbox.value = n;



inp=document.getElementsByTagName('input');
for(c=0;c<inp.length;c++) // <---- I think this bit is causing the crash!
    {
        if(inp[c].name=='addstaff') 
        {
            inp[c].onclick=function() 
            {
                var sel = document.createElement('select');
                sel.name = 'staff' + s;



                option1 = document.createElement('option');
                option1.name = 'Please select';
                option1.value = '';

                option1.innerHTML = option1.value;

                option2 = document.createElement('option');
                option2.name = 'Nurse';
                option2.value = 'Nurse';
                option2.innerHTML = option2.value;

                sel.appendChild(option1);
                        sel.appendChild(option2);

                document.getElementById('staffarea').appendChild(sel);



                x=document.createElement('input');
                x.setAttribute('rows',1);
                x.setAttribute('cols',20);
                x.name='staffquantity'+s;
                document.getElementById('staffarea').appendChild(x)

                 document.getElementById ('staffarea').innerHTML += '<br>';

                 // This bit updates a counter that will be $_POST
                var staffbox = document.getElementById('staffcounter');
                    staffbox.value = s;


                s++;
            }


        }

         else if(inp[c].name=='addevent') 
         {

               timemaker(); // calls another function which creates a specific text box

               x=document.createElement('input');
               x.setAttribute('rows',1);
               x.setAttribute('cols',20);
               x.name='event'+n;
               document.getElementById('eventarea').appendChild(x);


               x=document.createElement('input');
               x.setAttribute('rows',1);
               x.setAttribute('cols',20);
               x.name='supplies'+n;
               document.getElementById('eventarea').appendChild(x);

                x=document.createElement('input');
               x.setAttribute('rows',1);
               x.setAttribute('cols',20);
               x.name='manufacturer'+n;
               document.getElementById('eventarea').appendChild(x);

               x=document.createElement('input');
               x.setAttribute('rows',1);
               x.setAttribute('cols',20);
               x.name='quantity'+n;
               document.getElementById('eventarea').appendChild(x);

            var sel = document.createElement('select');
            sel.name = 'success' + n;


                    y = document.createElement('option');
                    y.name = 'Yes';
                    y.value = 'Yes';
                    y.innerHTML = y.value;

                    x = document.createElement('option');
                    x.name = 'No';
                    x.value = 'No';
                    x.innerHTML = x.value;


                        sel.appendChild(y);
                        sel.appendChild(x);


                    document.getElementById('eventarea').appendChild(sel);


               x=document.createElement('input');
               x.setAttribute('rows',1);
               x.setAttribute('cols',20);
               x.name='comment'+n;
               document.getElementById('eventarea').appendChild(x);

               document.getElementById ('eventarea').innerHTML += '<br>';

               // This bit updates a counter that will be $_POST
                var eventsbox = document.getElementById('eventscounter');
                    eventsbox.value = n;

            n++;

           }


         }
    return;
}

Спасибо

Answer 1

HTMLCollection - это живой запрос.

Значение:

Объекты NodeList и NamedNodeMap в DOM работают; то есть изменения в базовой структуре документа отражаются во всех соответствующих объектах NodeList и NamedNodeMap. Например, если пользователь DOM получает объект NodeList, содержащий дочерние элементы элемента, а затем добавляет дополнительные дочерние элементы к этому элементу (или удаляет дочерние элементы, или изменяет их), эти изменения автоматически отражаются в NodeList без дальнейших действий над часть пользователя. Аналогичным образом, изменения узла в дереве отражаются во всех ссылках на этот узел в объектах NodeList и NamedNodeMap.

Вот почему вы получаете бесконечный цикл.

inp=document.getElementsByTagName('input');

В цикле я вижу, что создаются новые <input>.

x=document.createElement('input');

Таким образом, решение должно быть либо изменить на inp=document.querySelectorAll("input") Или иметь статическую переменную длины

вроде так:

var = inp=document.getElementsByTagName('input'),
      inputsLength = inp.length;

for(c=0;c<inputsLength;c++){
... loop ....

}

Answer 2

Когда вы добавляете элемент ввода в ваш документ, подсчет изменений inp.

inp=document.getElementsByTagName('input'); 

Так что это бесконечный цикл, когда вы зависите от количества inp и добавляете входные данные каждую итерацию.

Присвоение длины переменной и использование ее для цикла.

inpCount = document.getElementsByTagName('input').length;

Answer 3

Если вам нужно что-то сделать только с <input name="addEvent" /> и <input name="addStaff" />, то вы можете немного упростить свой скрипт, присвоив этим элементам уникальный атрибут id и получив их таким образом:

var addEventInp = document.getElementById("addEventID");
var addStaffInp = document.getElementById("addStaffID");

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