Событие Onclick - НЕСКОЛЬКО КЛИКОВ

Question

Я создаю сайт, и мне нужно, чтобы изображение, которое после щелчка щелкнуло по нему, было заменено другим изображением и, после второго щелчка, заменено третьим изображением и т. Д.

Я написал функцию 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>

Запись в HTML <img class="textOverImage" src="img/beehive.jpg" alt="social logo" id="social" onclick= "change(0); change(1)"> просто приводит к замене изображения на изображение, соответствующее change(1) при первом нажатии.

Действительно ценю любую помощь, которая может быть оказана.

Answer 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++;

сделать

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