Я новичок в JavaScript и пытаюсь создать очень простой слайдер изображений.Я также пытаюсь понять событие onclick="" с ошибкой возврата.
Я узнал, как написать функцию и назначить ее в событие для <button>.
Настройка HTML:
<div id="custom-slider">
<button onclick="sliderPrev()">Prev</button>
<img id="slider" src="https://picsum.photos/400/200" />
<button onclick="sliderNext()">Next</button>
</div>
myJavaScript во внешнем файле: (до закрытия </body>)
<script src="src/index.js"></script>
Настройка myJavaScript:
var images = [
"https://picsum.photos/400/200",
"https://picsum.photos/400/200",
"https://picsum.photos/400/200"
];
var num = 0;
function sliderPrev() {
var slider = document.getElementById("slider");
num--;
if (num < 0) {
num = images.length - 1;
}
slider.src = images.length;
}
function sliderNext() {...}
Я создал JS во внешнемфайл и sliderPrev() для кнопки Prev.Однако каждый раз, когда я пытаюсь нажать на кнопку, она продолжает возвращаться ReferenceError: sliderPrev is not defined.
Я понятия не имею, что происходит в моем коде.Я также пробую простое тестирование, но в конце все еще не работаю.
Простое тестирование:
function sliderPrev() {
alert("Testing");
}
В моем исследовании я обнаружил, что кто-то говорит, что использование события onclick="" считается очень плохимПрактика Мы должны использовать addEventListener: (это правда?)
var button = document.getElementById("slider").addEventListener("click", sliderPrev);
См. мой код здесь !