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

Hi I have this javascript that adds a textbox when the user clicks a button. The textbox is then added to the DOM webpage.

嗨,我有这个javascript,当用户点击按钮时添加一个文本框。然后将文本框添加到DOM网页。

However It now does not seem to stop and gets caught it a infinite loop.

然而它现在似乎没有停止并被抓住它无限循环。

The loop uses

循环使用

GetElementsbyTagName

and how many there are for the limit but it was working fine earlier on .

有多少是有限制的,但它在早期工作正常。

//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;
}

Thanks

3 个解决方案

#1

HTMLCollection's are live query's.

HTMLCollection是实时查询。

Meaning:

NodeList and NamedNodeMap objects in the DOM are live; that is, changes to the underlying document structure are reflected in all relevant NodeList and NamedNodeMap objects. For example, if a DOM user gets a NodeList object containing the children of an Element, then subsequently adds more children to that element (or removes children, or modifies them), those changes are automatically reflected in the NodeList, without further action on the user’s part. Likewise, changes to a Node in the tree are reflected in all references to that Node in NodeList and NamedNodeMap objects.

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

This is why you get a infinite loop.

这就是你获得无限循环的原因。

inp=document.getElementsByTagName('input');

In the loop i see that new <input>'s are created.

在循环中,我看到创建了新的。

x=document.createElement('input');

So the solution should be either to change to inp=document.querySelectorAll("input") Or to have a static variable of the length

所以解决方案应该是改为inp = document.querySelectorAll(“input”)或者要有一个长度的静态变量

like so:

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

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

}

#2

When you add an input element to your document count of inp changes.

将输入元素添加到文档中的inp更改计数时。

inp=document.getElementsByTagName('input');

So it's an infinite loop when you depend on inp's count and add an input every iteration.

因此,当您依赖inp的计数并在每次迭代时添加输入时,它是一个无限循环。

Assing length to a variable and use it for the loop.

确定变量的长度并将其用于循环。

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

#3

If you only need to do something with <input name="addEvent" /> and <input name="addStaff" />, then you could simplify your script a little by giving those elements a unique id attribute and retrieving them thusly:

如果您只需要对和执行某些操作,那么您可以通过为这些元素提供唯一的id属性并因此检索它们来简化您的脚本:

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

Then, you could do whatever you need to do with just those two elements. I'll bet that this approach will get rid of your infinite loop problem as well.

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

#1