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");

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

这个javascript正在崩溃我的浏览器

3 个答案: