ERROR - is not a function

Pytanko. Dlaczego dostaje error - Uncaught TypeError: navItems.addEventListener is not a function

https://jsfiddle.net/18po5m7n/

navItems = document.querySelectorAll('.nav-items');
Tworzy kolekcję obiektów. Nie możesz zrobić addEventListener na kolekcji, jedynie na obiekcie.

Bezsensem było by "zbiernie" tego pojedynczo (dodawanie klas do kazdego elementu) 

Dobrze, że zauważasz bezsens tego. Jeszcze lepiej, gdybyś w takich sytuacjach (tj. powtarzanie podobnych czynności) od razu myślał "pętla!"

Odpowiadaj w postach.

Zaskocze Cie. POmysłałem. Problemem jest iż nie wiem jak ja napisać heh. Pewnie trzeba utworzyć zmienną, do której pętla 'ściągnie' wszystkie elementy?? 

Mając już kolekcję elementów z querySelectorAll możesz przeiterować się po nich za pomocą forEach. Jakbym napisał kod byłoby za łatwo, sorry. To musi mieć jakiś aspekt dydaktyczny.

No tak, w sumie racja.

Coś w ten deseń?

const navItems = document.querySelectorAll('.nav-item');

for (i = 0; i < navItems.length; ++i ) {
    console.log("forEach worked");
}

Mam takie rozwiązanie - https://jsfiddle.net/yg0dem12/

Oba powyższe rozwiązania są poprawne. forEach jest niby bardziej eleganckie, ale ostatnio czytam, że:
"Warning: JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead"
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated

OK, ale teraz w tym 1 rozwiązaniu należy w inny sposób napisać addEventListener itu niestety utknąłem.

Jakaś podpowiedź?

navItems[i].addEventListener (...)

Gracjas :)

Jeśli chodzi o eventy na wielu obiektach, pamiętaj, że jest jeszcze coś takiego jak event delegation