Question

我有这个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>

和这个scripts.js

function image(){

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

当我点击第一张图片时，它只会在屏幕上显示数字1，浏览器会陷入困境。

为什么不显示123？

Answer 1

你的循环无效的原因是你第一次打电话

document.write

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

如果你想看到1234，而不是使用document.write（正如Dai所指出的那样弃用），请使用：

document.body.innerHTML += i;

另外，正如Dai正确指出的那样，第一个数组索引是0而不是1，所以你的for循环应该如下：

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

注意：var i = 0;

Answer 2

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

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

}

请注意，document.write现在被认为是不好的做法，因为它会在浏览器的DOM和布局引擎中引发很多繁重的工作。而是使用document.createElement。

javascript for循环功能

2 个答案: