为什么图像在JavaScript onClick事件中以不正确的方式显示？_Javascript

为什么图像在JavaScript onClick事件中以不正确的方式显示？

javascript

为什么图像在JavaScript onClick事件中以不正确的方式显示？,javascript,Javascript,我有三张图片，图片1，图片2，图片3。我希望这种情况发生： image1 appears when the page loads image1 clicked-->image2 displays image2 clicked-->image3 displays image3 clciked-->image1 displays 目前实际情况是这样的： image1 clicked-->image3 displays image3 clicked-->image1 d

我有三张图片，图片1，图片2，图片3。我希望这种情况发生：

image1 appears when the page loads
image1 clicked-->image2 displays
image2 clicked-->image3 displays
image3 clciked-->image1 displays

目前实际情况是这样的：

image1 clicked-->image3 displays
image3 clicked-->image1 displays
image1 clicked-->image2 displays
image2 clicked-->image3 displays
image3 clciked-->image1 displays

…并且循环正确地继续

为什么在第一个循环中没有加载图像2？我在下面附上了我的Javascript代码。谢谢

<html>
<head>
</head>
<body>
    <div class="imagecentre"><img id="myButton" src="image1.jpg"/></div>
    <script type="text/javascript">


        var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
            i = 1;
        // event handler
        document.getElementById('myButton').addEventListener('click', function() 
            if (i==images.length-1){
            this.src=images[0];
            i=0;
            }

            else {
            this.src=images[i+1];
            i++;
            }

        }, false);

    </script>
</body>


var images=['image1.jpg'，'image2.jpg'，'image3.jpg']，
i=1；
//事件处理程序
document.getElementById（'myButton'）。addEventListener（'click'，function（）
if（i==images.length-1）{
this.src=images[0]；
i=0；
}
否则{
this.src=images[i+1]；
i++；
}
}，假）；

最初设置

i=0

   // i must be 0 initially.
   var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
       i = 0;

正如Jono所指出的，回调函数缺少一个开头

document.getElementById('myButton').addEventListener('click', function() {
   ...
}, false);

最初设置

i=0

   // i must be 0 initially.
   var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
       i = 0;

正如Jono所指出的，回调函数缺少一个开头

document.getElementById('myButton').addEventListener('click', function() {
   ...
}, false);

查看您的逻辑，当页面加载时，i==1。这意味着onclick“else”条件触发，因此加载图像[2]（这是数组中的第三个图像）

在页面加载时将

更改为0，并将缺少的

添加到click回调函数中

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
        i = 0;
    // event handler
    document.getElementById('myButton').addEventListener('click', function() {
        if (i==images.length-1){
        this.src=images[0];
        i=0;
        }

        else {
        this.src=images[i+1];
        i++;
        }

    }, false);

在页面加载时将

更改为0，并将缺少的

添加到click回调函数中

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
        i = 0;
    // event handler
    document.getElementById('myButton').addEventListener('click', function() {
        if (i==images.length-1){
        this.src=images[0];
        i=0;
        }

        else {
        this.src=images[i+1];
        i++;
        }

    }, false);


var images=['image1.jpg'，'image2.jpg'，'image3.jpg']，
i=0；
//事件处理程序
document.getElementById（'myButton'）。addEventListener（'click'，function（）{
if（i==images.length-1）{
this.src=images[0]；
i=0；
}
否则{
this.src=images[i+1]；
i++；
}
}，假）；

将

i=0

替换为

i=1


var images=['image1.jpg'，'image2.jpg'，'image3.jpg']，
i=0；
//事件处理程序
document.getElementById（'myButton'）。addEventListener（'click'，function（）{
if（i==images.length-1）{
this.src=images[0]；
i=0；
}
否则{
this.src=images[i+1]；
i++；
}
}，假）；

放置

i=0

而不是

i=1

，这对我来说似乎也是一个解决方案，但当我这样做时，代码停止工作（单击时图像没有变化）。您缺少单击回调函数的开头

。这对我来说也是一个解决方案，但当我这样做时，代码停止工作（单击时图像没有变化）。您缺少一个用于单击回调函数的开口

。

在页面加载时必须设置为0，此外，您缺少一个用于单击回调函数的开口

。谢谢，我尝试将其设置为0，但它不起作用，但结果是缺少该开口{这就是问题所在。谢谢！

必须在页面加载时设置为0，此外，您缺少了单击调用的一个开头

。谢谢，我尝试将其设置为0，但它不起作用，但结果是缺少的{才是问题所在。谢谢！