imu*_*ion 0 html javascript checkbox
我正在使用HTML和JavaScript创建一个复选框绘图程序.它基本上(在这个早期阶段)涉及绘制一个100 x 100平方的复选框.问题是,每次我尝试加载页面时,它都不会加载.它只是永远显示旋转半圈(我正在使用铬).你能告诉我我做错了什么吗？这是我的代码:
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript">
function drawBoxes()
{
for(var i = 0;i<100;i++)
{
for(var j = 0;j<100;j++)
{
document.getElementById('drawarea').innerHTML += "<input type = 'checkbox'>";
}
document.getElementById('drawarea').innerHTML += "<br />";
}
}
</script>
<title>Checkbox drawer</title>
</head>
<body onload = "drawBoxes()">
<div id = "controlbar" style = "height:100px;float:top;background-color:#FF0000;"><p>hello</p></div>
<p id ="drawarea"></p>
</body>
</html>
更新:添加jcubic的<input>标签捕获后,第一个<div>(红色)加载,但复选框没有.
而不是操纵DOM 100*100次,只需构建一个字符串并在循环结束时设置一次值:
var html = "";
for(var i = 0;i<100;i++)
{
for(var j = 0;j<5;j++)
{
html += "<input type = 'checkbox'>";
}
html += "<br />";
}
document.getElementById('drawarea').innerHTML = html;
这是JSFiddle看到这个负载很快:http://jsfiddle.net/8hVBQ/