在Javascript中定义for循环

时间:2011-11-24 12:51:56

标签: javascript

我似乎无法定义for循环函数,我做错了什么?

我的HTML代码:

<body onload="generate()">

我的Javascript代码:

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

4 个答案:

答案 0 :(得分:11)

你的循环没问题(除了你没有声明i,因此你成为Horror of Implicit Globals的牺牲品),这就是document.write这就是问题所在。您只能在内联脚本中使用document.write,而不能在加载页面后使用body(例如,不在load document.write事件中)。如果您在加载页面后使用generate,则会删除页面并替换为您输出的内容(因为存在隐式document.open调用)。因此,在您的情况下,您的页面会消失,而且会有150个空白div。

要在加载后操作页面,您需要使用DOM,引用:

例如,以下是您编写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);
    }
}

或者更有用的是,150个div的数字在:

{{1}}

Live copy


另外,如果您要进行任何重要的DOM操作,那么使用良好的JavaScript浏览器库(例如jQueryPrototypeYUIClosure是非常值得的。或any of several others。这些平滑的浏览器差异(和彻头彻尾的错误),提供有用的实用功能,通常让你专注于你实际上想要做的事情,而不是摆弄IE和Chrome,Opera和Safari之间的不一致......

答案 1 :(得分:0)

做下面的事情;

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

答案 2 :(得分:0)

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

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

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

    }

}, false);

这应该有效,但是没有测试过。 等待'DOMContenLoaded'事件很重要,因为在脚本执行时可能不存在某些元素。

答案 3 :(得分:0)

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>