API classList et problème avec un for

swagphil
Javascript

Bonjour à tous,

Voila je rencontre un petit problème avec mon code. Je travaille sur la création d'un mode nuit pour mon application qui modifie le CSS du site en fonction de l'heure de la journée.

Ce que je fais

Je me suis créé une méthode appelée nightSwith qui regarde dans le localStorage de mon navigateur si la valeur "modenuit" === true et applique ensuite un ajout de class dans les items de mon menu. Ensuite à l'aide d'une répétitive for je parcours les éléments de mon menu et j'ajoute là class "white-text" à mes éléments à l'aide de l'API classList.

nightSwith:
                function()
                {
                    if(localStorage.getItem("nightMode") === "true")
                    {
                        document.getElementById("modenuit").setAttribute("checked", "checked");
                        console.log("activé");
                        var headerpanel = document.querySelectorAll(".collapsible-header");
                        for(var intCpt = 0; intCpt<= headerpanel.length; intCpt = intCpt + 1 )
                        {
                            headerpanel[intCpt].classList.add('white-text');
                        }
                    }
                }

Ce que j'obtiens

Uncaught TypeError: Cannot read property 'classList' of undefined
    at Object.nightSwith (accessibility.js:63)
    at accessibility.js:73
J'ai cette erreur donc mon navigateur même si  j'arrive à changer le CSS dans ma vue. 

Quelles seraient donc les pistes de solutions pour ce problème ? 

Merci beaucoup

3 réponses

betaWeb
Réponse acceptée

Salut,

Essaye plutôt comme ceci :

var headerpanel = document.querySelectorAll(".collapsible-header");
if (headerpanel && headerpanel.length) {
  Array.prototype.forEach.call(headerpanel, function (el) {
      el.classList.add('white-text');
  });
}
PhiSyX

Une des solutions est d'ajouter une classe CSS à ton élément <body> (.nightmode par exemple) et de créer les règles CSS pour le mode nuit comme suit:

.nightmode .collapsible-header {
  /* ici, les propriétés du .white-text */
}

.nightmode .autreSelecteur { ... }

Ce qui est, à mon sens, plus simple.

swagphil
Auteur

Merci betaWeb ce code fonctionne très très bien avec ce que je souhaite faire. Je vais étudier ce code pour comprendre et voir ce qui n'a pas marché avec le précédent.