Question

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

我的HTML代码：

<body onload="generate()">

我的Javascript代码：

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

Answer 1

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

要在加载后操作页面，您需要使用DOM，引用：

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

例如，以下是您编写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浏览器库（例如jQuery，Prototype，YUI，Closure是非常值得的。或any of several others。这些平滑的浏览器差异（和彻头彻尾的错误），提供有用的实用功能，通常让你专注于你实际上想要做的事情，而不是摆弄IE和Chrome，Opera和Safari之间的不一致......

Answer 2

做下面的事情;

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

Answer 3

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

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

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

    }

}, false);

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

Answer 4

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>

在Javascript中定义for循环

4 个答案: