Javascript Onclick事件-多次单击

我正在建立一个网站，我希望有一个图像，一旦点击它是由另一个图像取代，并在第二次点击，由第三个图像等取代

我已经为此编写了一个JavaScript函数。问题是我只能在我的索引列表中调出一个项目，它从来不会允许我点击几下所有的索引项目

这是我迄今为止编写的代码：

function change (index) {
    var links = new Array();
    links[0] = img/videoplace.jpg;
    links[1]="img/hiroshima.jpg";
    var image = document.getElementById('social');
    image.src = links[index];
}

<div class="box box1">
    <img class="textOverImage" src="img/beehive.jpg" alt="social logo"  id="social" onclick= "change(0); change(1)" >
</div>

功能更改（索引）{
var links=新数组（）；
links[0]=img/videoplace.jpg；
链接[1]=“img/hiroshima.jpg”；
var image=document.getElementById（'social'）；
image.src=链接[索引]；
}

在Html中写入

只会在第一次单击时将图像替换为与

更改（1）

对应的图像

---

非常感谢您提供的任何帮助。

使用Javascript正确地附加事件处理程序（内联处理程序被广泛认为是不好的做法，并且很难管理）。然后，在Javascript中，可以保留当前显示的图像索引的持久变量。每次单击时，增加索引，并显示相应的图像：

const links = [
  'img/beehive.jpg', // first image is already displayed when page is loaded
  'img/videoplace.jpg',
  'img/hiroshima.jpg'
];
let index = 0;
const img = document.querySelector('#social');
img.addEventListener('click', () => {
  index++;
  img.src = links[index];
});

请注意，一次声明一个数组通常比使用

new array（）

并逐个指定指示符更好、更简洁

如果希望显示的图像环绕，以便在单击最后一个图像后，再次显示第一个图像，则使用模。而不是

index++;

做

---

首先，感谢您抽出时间！虽然我的html中可能仍然存在一些错误，因为现在我甚至不能点击图像…JAVASCRIPT:function change（index）{const links=['img/beehive.jpg'，img/videoplace.jpg'，img/hiroshima.jpg']；let index=0；const img=document.querySelector（'#social'）；img.addEventListener（'click'，（）=>{index++；img.src=links[index]再次感谢您打开浏览器控制台并查找错误。如果代码符合您描述的顺序，则说明您没有在正确的时间运行脚本-您需要等待元素存在，然后再附加处理程序。看见

index = (index + 1) % links.length;