這個 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 用戶獲得一個包含元素子元素的 NodeList object，然后隨后向該元素添加更多子元素（或刪除子元素，或修改它們），這些更改將自動反映在 NodeList 中，而無需對元素進行進一步操作用戶的部分。 同樣，對樹中節點的更改會反映在 NodeList 和 NamedNodeMap 對象中對該節點的所有引用中。

這就是你得到一個無限循環的原因。

inp=document.getElementsByTagName('input');

在循環中，我看到創建了新的<input> 。

x=document.createElement('input');

因此解決方案應該是更改為inp=document.querySelectorAll("input")或具有長度的 static 變量

像這樣：

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

然后，你可以只用這兩個元素做任何你需要做的事情。 我敢打賭，這種方法也將擺脫你的無限循環問題。