Я не могу найти причину, по которой функция window.setInterval () не работает в моем коде. Onclick делает один цикл. В чем моя логическая ошибка?
Функция startGallery делает всего один цикл при нажатии на кнопку. Это проблема.
function startGallery() {
window.intervalId = window.setInterval(imgChange(), 2000);
}
function stopGallery() {
window.clearInterval(window.intervalId);
}
function imgChange() {
let picture1 = document.getElementById('picture1');
let picture2 = document.getElementById('picture2');
let picture3 = document.getElementById('picture3');
let picture4 = document.getElementById('picture4');
let picture5 = document.getElementById('picture5');
console.log('picture1 - ' + picture1.src);
console.log('picture2 - ' + picture2.src);
console.log('picture3 - ' + picture3.src);
console.log('picture4 - ' + picture4.src);
console.log('picture5 - ' + picture5.src);
let src1 = "file:///C:/js/JavaScript/img/1.jpg";
let src2 = "file:///C:/js/JavaScript/img/2.jpg";
let src3 = "file:///C:/js/JavaScript/img/3.jpg";
let src4 = "file:///C:/js/JavaScript/img/4.jpg";
let src5 = "file:///C:/js/JavaScript/img/5.jpg";
(picture1.src == src1) ? picture1.src = src2: (picture1.src == src2) ? picture1.src = src3 : (picture1.src == src3) ? picture1.src = src4 : (picture1.src == src4) ? picture1.src = src5 : picture1.src = src1;
(picture2.src == src2) ? picture2.src = src3: (picture2.src == src3) ? picture2.src = src4 : (picture2.src == src4) ? picture2.src = src5 : (picture2.src == src5) ? picture2.src = src1 : picture2.src = src2;
(picture3.src == src3) ? picture3.src = src4: (picture3.src == src4) ? picture3.src = src5 : (picture3.src == src5) ? picture3.src = src1 : (picture3.src == src1) ? picture3.src = src2 : picture3.src = src3;
(picture4.src == src4) ? picture4.src = src5: (picture4.src == src5) ? picture4.src = src1 : (picture4.src == src1) ? picture4.src = src2 : (picture4.src == src2) ? picture4.src = src3 : picture4.src = src4;
(picture5.src == src5) ? picture5.src = src1: (picture5.src == src1) ? picture5.src = src2 : (picture5.src == src2) ? picture5.src = src3 : (picture5.src == src3) ? picture5.src = src4 : picture5.src = src5;
}
body {
background-color: black;
text-decoration-color: white;
color: white;
}
input {
width: 20vw;
padding: 10px 2px 10px 2px;
}
label {
font-family: "Lucida Console", "Courier New", monospace;
font-size: 30px;
}
p {
font-family: "Lucida Console", "Courier New", monospace;
font-size: 30px;
}
.my-class {
color: red;
}
img {
height: 40vh;
width: 30vw;
}
<form>
<fieldset>
<legend>task_21_7</legend>
<img id="picture1" src="img/1.jpg">
<img id="picture2" src="img/2.jpg">
<img id="picture3" src="img/3.jpg">
<img id="picture4" src="img/4.jpg">
<img id="picture5" src="img/5.jpg"><br><br>
<input type="button" name="start" value="start" onclick="startGallery();"><br><br>
<input type="button" name="stop" value="stop" onclick="stopGallery();"><br><br>
</fieldset>
</form>
Ответы (1 шт):
Автор решения: gil9red
→ Ссылка
Тут вы в setInterval первым параметром передали результат выполнения функции, а не ссылку на функцию:
window.intervalId = window.setInterval(imgChange(), 2000);
Попробуйте так:
window.intervalId = window.setInterval(imgChange, 2000);
Или так (добавил лямбду):
window.intervalId = window.setInterval(() => { imgChange() }, 2000);