这个 JavaScript 导致我的浏览器崩溃

Question

你好，我有这个 javascript，当用户单击按钮时添加一个文本框。然后将文本框添加到 DOM 网页。

然而它现在似乎并没有停止并陷入无限循环。

循环使用

按标签名称获取元素

以及有多少个限制，但它之前工作正常。

//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 是实时查询。

含义：

DOM 中的 NodeList 和 NamedNodeMap 对象是实时的；也就是说，对底层文档结构的更改会反映在所有相关的 NodeList 和 NamedNodeMap 对象中。例如，如果 DOM 用户获取包含 Element 子级的 NodeList 对象，然后随后向该元素添加更多子级（或删除子级，或修改它们），则这些更改将自动反映在 NodeList 中，而无需对用户的部分。同样，对树中节点的更改也会反映在 NodeList 和 NamedNodeMap 对象中对该节点的所有引用中。

这就是为什么会出现无限循环的原因。

inp=document.getElementsByTagName('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

如果您只需要使用 和 执行某些操作，那么您可以简化通过给这些元素一个唯一的 id 属性并检索它们来稍微修改您的脚本：

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

然后，您可以仅使用这两个元素执行您需要执行的任何操作。我敢打赌，这种方法也将消除您的无限循环问题。