循环函数的javascript

javascript for loop function

本文关键字：javascript 函数 循环      更新时间：2023-09-26

我有这个index.html

<html>
<head>
      <script type="text/javascript" src="scripts.js" > </script>  
</head>
<body>
<center><h1>Images</h1></center>
<center> 
    <img id="b1" onclick="image()" src="1.jpg">
    <img id="b2" onclick="image()" src="2.jpg">
    <img id="b3" onclick="image()" src="3.jpg">    
    <img id="b4" onclick="image()" src="4.jpg">    
</center> 
</body>
</html>

这个脚本.js

function image(){
    for(var i = 1; i < document.images.length; i++)
    {
            document.write(i);
    }

当我点击第一张图片时，屏幕上只显示了数字1，浏览器陷入了思考。

为什么不显示123？

循环不工作的原因是因为第一次调用

document.write

它将从页面中删除所有图像，从而将document.images节点列表的长度减少到零。

如果你想看到1234，而不是使用document.write(正如戴所指出的，这无论如何都是不推荐的(使用：

document.body.innerHTML += i;

此外，正如戴正确指出的，第一个数组索引是0而不是1，所以for循环应该如下所示：

for(var i = 0; i < document.images.length; i++)
{
        document.body.innerHTML += i;
}

注意：var i=0；

数组索引从ECMAscript中的0开始，而不是从1开始，您需要将循环重写为：

for(var i=0;i<document.images.length;i++) {
}

请注意，document.write现在被认为是一种糟糕的做法，因为它会在浏览器的DOM和布局引擎中引发大量繁重的工作。请改用document.createElement。

相关文章：