Fatal编程技术网

在Javascript中定义for循环

javascript

在Javascript中定义for循环,javascript,Javascript,我似乎无法定义for循环函数，我做错了什么 我的HTML代码： <body onload="generate()"> 我的Javascript代码： function generate(){ for(i = 0; i < 150; i++) { document.write("<div></div>"); } }; 函数生成（）{ 对于（i=0；i

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

我的HTML代码：

<body onload="generate()">
我的Javascript代码：

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

函数生成（）{
对于（i=0；i<150；i++）{
文件。填写（“”）；
}
};
您的循环很好（除了您没有声明
i
，因此您成为了问题的牺牲品），这就是问题所在。只能在内联脚本中使用
document.write
，而不能在页面加载后使用（例如，不能在
body
load
事件中使用）。如果在加载页面后使用
document.write
，它会将页面撕下并替换为您输出的内容（因为存在隐式调用）。所以在你的例子中，你的页面消失了，取而代之的是150个空白div

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

  • -浏览器广泛支持
  • -浏览器广泛支持
  • -得到了很好的支持，存在一些差距
例如，下面是如何编写
generate
函数将150个空div附加到页面：

function generate() {
    var i;

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

函数生成（）{
var i；
对于（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);
    }
}

函数生成（）{
var i，div；
对于（i=0；i<150；i++）{
div=document.createElement（'div'）；
div.innerHTML=“我是div#”+I；
文件.正文.附件（div）；
}
}

另外，如果您要进行任何重要的DOM操作，那么使用好的JavaScript浏览器库（如、、或）是值得的。这些消除了浏览器差异（以及明显的bug），提供了有用的实用程序功能，通常让你专注于你真正想做的事情，而不是摆弄IE和Chrome、Opera和Safari之间的不一致性…

请执行以下操作

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

函数生成（）{
var echo=“”；
对于（i=0；i<150；i++）{
回声+=”；
}
document.getElementById（“someID”）.innerHTML=echo；
//document.write（echo）；//仅当要替换整个DOM结构时才执行此操作
};

窗口。addEventListener（“DOMContentLoaded”，函数（）{
对于（变量i=0；i<150；i++）{
document.body.appendChild（document.createElement（“div”））；
}
}，假）；
这应该行得通，但没有测试它。
等待“domcontnloaded”事件很重要，因为在执行脚本时，某些元素可能不存在。

中提到的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>


var max=150；
window.onload=function（）{
var div，container=document.createElement（'div'）；

对于（var i=0；i您希望得到什么输出，以及您得到什么输出？为什么您认为它不起作用？您是否使用Firefox中的Firebug在事后查看您的页面，以查看div是否存在？它们都将是空的，因此它们在页面上不可见，除非是空白。无论如何，您的代码都可以工作。在什么世界上我们有我nnerContent？你是对的。当然是innerHTML。我考虑的是innerText/textContent，这样就不会执行任何脚本。但在这种情况下，innerHTML是一种方法。我更正了我的答案谢谢！我正在考虑制作一个简单的类似roguelike的程序来学习Javascript，所以我尝试在不依赖任何库的情况下执行它。@Leventhan:我不确定“roguelike”是什么，但祝你好运！要学习的东西是：JavaScript本身，然后是你可以在目标环境中使用它做的事情。在浏览器中，这意味着使用DOM（或为你做这件事的库）。DOM是浏览器的API，而不是JavaScript本身的一部分。如果您正在进行浏览器工作，了解DOM的工作原理肯定是件好事，即使您最终（稍后）使用了一个库来为您解决一些麻烦。

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