Lokalna zmienna w JavaScript nie wczytuje się

Question

Witam. Powyżej wkleiłem swój kod. Niewiele niestety widać, ponieważ jest to layout odtwarzacza mp3 i bez plików mp3 i jpg jest trochę chaos. Niemniej jednak uda się mi raczej pokazać, na czym polega problem, ponieważ zostawiłem notatki w kodzie.

Po wciśnięciu nextBtn zwiększa się mój index, dlatego zmienna "audio" powinna automatycznie wczytywać już nową piosenkę po wciśnięciu play. Dodając console.log(index) do mojego "play" widzę, że index się zwiększa prawidłowo, jednak dalej odtwarzana jest piosenka 0.mp3 a nie 1.mp3 itd. Jeżeli jednak moją zmienną audio wrzucę wewnątrz funkcji "play" to wszystko działa prawidłowo (odtwarzana jest już piosenka z następnym indexem) jednak NIE DA SIĘ WTEDY ZAPAUZOWAĆ PIOSENKI. Funkcja "pause" kompletnie nie działa, nawet jeżeli wrzucę do niej do środka zmienną audio.

Podsumowując: moja zmienna audio jest poza funkcjami, a potrzebuję jej wewnątrz funkcji "play". Jeżeli umieszczę jej wewnątrz funkcji "play" to przestaje działać funkcja "pause". Jeżeli jej nie umieszczę, to mogę grać i pauzować, jednak tylko jedną piosenkę, bo pomimo że index rośnie, to jakimś cudem funkcja play zawsze i tak odpala piosenkę o indeksie 0.

Jestem początkujący w JS dlatego kompletnie nie mam pojęcia co robić, wertowałem już stacka ale też nie bardzo czaję. Pozdrawiam i baaaardzo dziękuję jeżeli komukolwiek zechce się pomóc :)

Comments

(nie wkleiłeś dobrego linka do kodu)

---

@eric9972, po pierwsze to daj link, a po drugie to poczytaj sobie o zasięgu zmiennych w JS i tzw. domknięciach, bo wydaje mi się, że w tym właśnie się nieco zagubiłeś.

---

@adrian17, https://codepen.io/eryk-kryszewski/pen/gypZYe

---

Już wkleiłem poprawnego linka, sorry, zamotałem się -.-

---

no ale chwila, co Ty chcesz właściwie zrobić? Skoro używasz tej zmiennej w kilku funkcjach i nie chcesz jej przekazywać jako argument (np. przez wartość jako typ number) to właśnie korzystasz z zadeklarowanej zmiennej w zakresie zewnętrznym. Niezbyt rozumiem w czym dokładnie jest problem?

---

Też tego nie rozumiem.

Po wciśnięciu nextBtn zwiększa się mój index

nextBtn.addEventListener('click', function(e){
  e.preventDefault();
  //3. Wołamy funkcję reloadP
  reloadP();
})

//4. Przeładowywanie stronki sprawia, że zawsze zwiększy się nasz index
window.onload = function() {
  var reloading = sessionStorage.getItem("reloading");
  if (reloading) {
      sessionStorage.removeItem("reloading");
      index++;
      console.log(index);
  }
}

function reloadP() {
  sessionStorage.setItem("reloading", "true");
  document.location.reload();
}

Przy przeładowaniu cała strona ładuje się od nowa - w tym cały JS, obiekty, zmienne etc.

---

Chodzi o to, że przy przeładowaniu strony mój index zwiększa się z 0 na 1. Wtedy po wciśnięciu play jak daję console.log to wczytuje mi index 1, a odtwarza piosenkę dalej 0.mp3 a nie 1.mp3. Jeżeli wrzucę let audio wewnątrz funkcji PLAY to wszystko działa, ale wtedy nie da się pauzować. Pytanie brzmi: dlaczego jeżeli skopiuję let audio do funkcji PLAY to automatycznie przestaje mi działać funkcja PAUSE która nie ma z tym nic wspólnego? Potrzebuję tego let audio wewnątrz funkcji PLAY, albo chociaż dowiedzieć się dlaczego on mój index jest 1 a PLAY dalej korzysta z index 0 odtwarzając 0.mp3 zamiast 1.mp3 z moich plików.

---

Użyłem funkcji przeładowania ekranu, ponieważ chcę tak jakby na nowo wszystko załadować. Chcę aby strona została odświeżona i załadowana innymi danymi, takimi jak większy index, a co za tym idzie inny tytuł, okładka itd. Potem sobie po prostu stworzę tablicę i na podstawie indexu to dopasuje, ale musi to najpierw zacząć jakoś działać :)