[英]This javascript is crashing my browser
嗨,我有这个 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;
}
谢谢
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 ....
}
当您将输入元素添加到文档时,inp 更改计数。
inp=document.getElementsByTagName('input');
因此,当您依赖 inp 的计数并在每次迭代时添加一个输入时,这是一个无限循环。
将长度分配给变量并将其用于循环。
inpCount = document.getElementsByTagName('input').length;
如果你只需要对<input name="addEvent" />
和<input name="addStaff" />
做一些事情,那么你可以通过给这些元素一个唯一的id
属性并因此检索它们来稍微简化你的脚本:
var addEventInp = document.getElementById("addEventID");
var addStaffInp = document.getElementById("addStaffID");
然后,你可以只用这两个元素做任何你需要做的事情。 我敢打赌,这种方法也将摆脱你的无限循环问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.