在Javascript中定义for循环

我似乎无法定义for循环函数，我做错了什么？在Javascript中定义for循环

我的HTML代码：

<body onload="generate()">

我的Javascript代码：

function generate(){ 
    for(i = 0; i < 150; i++) { 
     document.write("<div></div>"); 
    } 
};

来源

2011-11-24 Yos Riady

你期待什么输出，你会得到什么输出？ –

你为什么认为它不起作用？事实上，您是否在Firefox中使用过Firebug来查看您的页面，以查看div是否在那里？它们全部是空的，因此它们不会在页面上显示，除非是空格。无论如何，你的代码工作。 – dnuttle

你的循环是好的（除了你不声明i，所以你堕入Horror of Implicit Globals），这是document.write这就是问题所在。您只能在内联脚本中使用document.write，而不是在页面加载后（例如，不在bodyload事件中）。如果您在页面加载后使用document.write，则会将页面撕下，并且会用您输出的内容替换（因为存在隐含的document.open调用）。所以在你的情况下，你的页面消失了，而150个空白div在那里。

为了操纵负荷后的页面，你要使用DOM，参考资料：

DOM2 Core - 相当好 - 通过浏览器
DOM3 Core广泛扶持产品 - 广泛的浏览器
DOM HTML bindings支持支持，一些差距

例如，以下是如何编写generate函数追加150点空白的div页面：

function generate() { 
    var i; 

    for (i = 0; i < 150; i++){ 
     document.body.appendChild(document.createElement('div')); 
    } 
}

或者更有效，150点的div他们的号码：

function generate() { 
    var i, div; 

    for (i = 0; i < 150; i++){ 
     div = document.createElement('div'); 
     div.innerHTML = "I'm div #" + i; 
     document.body.appendChild(div); 
    } 
}

Live copy

另外，如果你打算怎么办任何重要的DOM操作，都值得使用一个好的JavaScript浏览器库，如jQuery,Prototype,YUI,Closure或any of several others。这些平滑的浏览器差异（和彻底的错误），提供了有用的实用功能，并且通常让您专注于您实际正在尝试做的事情，而不是摆弄IE与Chrome，Opera和Safari之间的不一致之处......

来源

2011-11-24 12:54:07

谢谢！我正在考虑制作一个简单的roguelike来学习Javascript，所以我试图在不依赖任何库的情况下做到这一点。 –

@Leventhan：我不确定什么是“roguelike”，但祝你好运！要学习的东西是：JavaScript本身，然后你可以在目标环境中使用它。在浏览器中，这意味着使用DOM（或为你做的那个库）。 DOM是浏览器的API，不是JavaScript本身的一部分。如果你在浏览器上工作，即使你最终（后来）使用一个为你抽象出一些麻烦的库，对DOM的工作原理也有一定的了解。 –

做下面的事情;

function generate(){ 
    var echo=""; 
    for(i = 0; i < 150; i++){ 
     echo+="<div></div>"; 
    } 
    document.getElementById("someID").innerHTML=echo; 
    //document.write(echo); //only do this, if you want to replace the ENTIRE DOM structure 
};

来源

2011-11-24 12:57:20 japrescott

在什么样的世界中我们拥有innerContent？ – mplungjan

你是对的。当然它的innerHTML。我在考虑innerText/textContent，所以没有脚本会被执行。但是在这种情况下，innerHTML就是要走的路。我纠正了我的答案 – japrescott

window.addEventListener("DOMContentLoaded", function() { 

    for(var i = 0; i < 150; i++) { 

     document.body.appendChild(document.createElement("div")); 

    } 

}, false);

这应该工作，没有虽然测试。等待'DOMContenLoaded'事件很重要，因为在脚本执行时可能不存在某些元素。

来源

2011-11-24 13:01:55

https://stackoverflow.com/q/8257414/295783中提到的document.write是它不起作用的原因。第一个document.write 湿巾包含正在执行的脚本的页面。更好的办法是

<html> 
<head> 
<script type="text/javascript"> 
    var max = 150; 
    window.onload=function() { 
    var div, container = document.createElement('div'); 
    for (var i=0;i<max;i++) { 
     div = document.createElement('div'); 
     container.appendChild(div); 
    } 
    document.body.appendChind(container); 
    } 
</script> 
</head> 
<body> 
</body> 
</html>

来源

2011-11-24 13:02:27 mplungjan

在Javascript中定义for循环

回答

相关问题