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

意思：

DOM 中的 NodeList 和 NamedNodeMap 对象是活动的；也就是说，对底层文档结构的更改会反映在所有相关的 NodeList 和 NamedNodeMap 对象中。例如，如果 DOM 用户获得了一个包含 Element 子元素的 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");

然后，您可以只用这两个元素做任何您需要做的事情。我敢打赌，这种方法也能解决你的无限循环问题。