Javascript accordion

Question

Napisałem kod do obsługi accordion, konsola pokazuje błąd "panel is undefined". Co musze zrobić aby go poprawić?

let acc = document.getElementsByClassName('quest');

for (let i=0; i<acc.length; i++){
    acc[i].addEventListener('click', () => {
      
        /*Toggle between hiding and showing*/
        let panel = this.nextElementSibling;
        if(panel.style.display === 'block'){
            panel.style.display = 'none';
            
        } else {
            panel.style.display = 'block';
            
        }
        
    });
}

 

Answer 1

Używasz funkcji strzałkowej, więc this jest window/undefined (w zależności od tego, czy jesteśmy w strict mode, czy nie). Zamiast niego powinieneś zastosować event.target.

Comments

Gdyby this było undefined, to pojawił by się TypeError, że nie można odczytać property nextElementSibling z undefined. ;)

W tym przypadku this raczej wskazuje na obiekt window, a ten nie posiada property nextElementSibling - stąd do zmiennej panel jest przypisane undefined.

---

Meh, jak widzę kod ES6+, to z automatu już uznaję, że jest w strict mode :D Fakt, tutaj jest window.

---

jak widzę kod ES6+, to z automatu już uznaję, że jest w strict mode

Czy to z przyzwyczajenia, że kod ES6+ coraz częściej jest uruchamiany jako moduł (wtedy z domyślnym strict mode)? :)

---

Od lat praktycznie nie miałem styczności z kodem w loose mode, nie tylko z powodu modułów, ale także wykorzystania bundlerów i transpilerów.