Событие 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>
Запись в Html <img class = "textOverImage" src = "img/beehive.jpg" alt = "social logo" id = "social" onclick= "change(0); change(1)"> просто приводит к замене изображения на изображение, соответствующее change(1), при первом щелчке.
Очень признателен за любую помощь, которая может быть предоставлена.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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;
JAVASCRIPT: <script type = "text / javascript"> изменение функции (индекс) {const links = ['img / beehive.jpg', 'img / videoplace.jpg', 'img / hiroshima.jpg']; пусть index = 0; const img = document.querySelector ('# social'); img.addEventListener ('клик', () => {index ++; img.src = links [index];}); } </script> HMTL: <div class = "box box1"> <img class = "textOverImage" src = "img / beehive.jpg" alt = "social logo" id = "social" onclick = "change (0) "> </div> Еще раз спасибо
Откройте консоль браузера и поищите ошибки. Если код находится в описанном вами порядке, вы не запускаете скрипт в нужное время - вам нужно дождаться существования элемента, прежде чем прикреплять обработчик. См. stackoverflow.com/questions/14028959/…
Прежде всего, спасибо за уделенное время! Хотя я все еще могу делать что-то не так в моем html, потому что теперь я даже не могу щелкнуть изображение ...