SLIDER na stronie JavaScript - auto przewijanie problem

Question

Hej forumowicze! 
Jest taka sprawa...

Robiłem sobie ostatnio slider zdjęć używając HTML'a, CSS's i JavaScript'u.
Wszystko działało pięknie. Postanowiłem mój projekt wzbogacić jednak o animacje i przejścia zdjęć.
Udało się, lecz nagle funkcjonalność mojego slider'a - Auto przewijanie zdjęć - przestała działać!
W momencie kiedy chcę uruchomić automatyczne przewijanie zdjęć wszystko jest w porządku, ale gdy chcę wyłączyć nie dzieje się to.
Dlaczego? Pomocy!

Funkcjonalność - Auto przewijanie zdjęć

• tag label połączony z checkbox'em
• atrybut onclick i wywołanie funkcji sparwdzjącej (isChecked)
• wywołanie setInterval() lub clearInterval()

 

/ /Check is checkBOX checked and run right function
function isChecked() {
	const cb = document.getElementById('auto_save');
	const checkIt = cb.checked;
	if (checkIt == true)
	{
		myStartFunction();
	} else {
		myStopFunction();
	}	
}

// Start Auto Change Image
function myStartFunction() {
  const myVar = setInterval(nextImg, 3500);
}

// Stop Auto Change Image
function myStopFunction() {
  clearInterval(myVar);
}

<input type="checkbox" onclick="isChecked()" id="auto_save"class="checkbox-auto_save">
<label for="auto_save" class="label-checkbox">Auto przewijanie zdjęć</label>

@keyframes animation-img 
{	
	from
	{
		transform: scale(2);
		opacity: .5;
		filter: sepia(45%);	
	}
	to 
	{
		transform: scale(1);
		opacity: 1;
		filter: sepia(0%);	
	}
}
  
.animation-img 
{
	animation: animation-img .8s ease-in forwards;
}

//Dodawanie klasy z animacją
slide.classList.add('animation-img');

//Usuwanie klasy z animacją po zakończeniu animacji
setTimeout(() => slide.classList.remove('animation-img'), 800);

 

Slider na STRONIE www: https://mojslider.000webhostapp.com/

RESZTA KODU: https://drive.google.com/drive/folders/1v4Zp94KBs3Q0JEuM6qOJM3MKXqvqM_Pd?usp=sharing

 

 

Proszę o wyrozumiałość - jestem początkującym i dopiero zaczynam swoją przygodę.

Z góry dziękuję za każdą podpowiedź/odpowiedź.

 

Answer 1

W konsoli masz błąd  

 myVar is not defined

Z tego co widzę to  zadeklarowałeś myVar w funkcji  myStartFunction czyli lokalnie, więc nie masz do niej dostępu w funkcji myStopFunction

Comments

Usunąłem z tego zapisu "const":

// Start Auto Change Image
function myStartFunction() {
  const myVar = setInterval(nextImg, 3500);
}

I zrobiłem to tak:

// Start Auto Change Image
function myStartFunction() {
  myVar = setInterval(nextImg, 3500);
}

I wszystko już działa!

Dzięki :D

---

@pablop76,

A i jeszcze jedno..

Dlaczego to działa?

Przecież nie deklaruje zmiennej poza funkcją. Skąd druga drugą funkcja wie o jej istnieniu?

Dlaczego nie działa mi za to na stronie www?

Lokalnie na komputerze śmiga a na hostingu już nie.

---

Nigdy nie deklaruj zmiennej bez słowa kluczowego