getDocumentById retourne null

quelles causes possibles?

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

salut à tous, j'ai quelques peu de soucis avec mon apprentissage de javascript, et du coup je galère un peu…

pour cristalliser un peu mes connaissances, j'ai tendance à fonctionner "par projets". et cette fois-ci, j'ai un petit soucis avec un getDocumentById, qui me retourne un pointeur sur null (ou une référence, pour les puristes, mais OSEF, le truc c'est que ça pointe pas sur l'objet que je voulais au départ, et que du coup ça fait planter ma page)

ce que je voulais faire c'est un div qui s'ouvre et se ferme au clic sur son titre (un peu comme la balise spoil sur les forums). bien entendu ça marche pas, parce que c'est ledit élément titre qui est mal compris par JS, et qui pointe sur null.

voici la partie utile de mon code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
        <div class="explication"> 
            <h3>l'explication</h3>
            <p>en informatique, une couleur peut être représentée par le triplet constitué de sa composition en Rouge, Vert, et Bleu.<br />
                la fonction CSS rgb(r,g,b) crée cette couleur.<br />
                elle est contenue dans la fonction miseAJour est appelée à chaque changement de valeur pour les curseurs, et une fois au premier chargement de la page.
            </p>
            <h3 class="titreDepliementCode" id="titreCodeVisionneuse">révéler le code</h3>
            <div class="code">
                <pre class="HTML"><h4>HTML</h4>
                    <code class="codeHTML">
du code à afficher, du coup comme ça a pas d'intéret, je le mets pas, pour plusieurs raisons:

+ pour pas embrouiller les lecteurs (l'affichage du code dans du code, aucune différence pour la coloration syntaxique tout ça...)

+ pour pas rallonger le code utile pour rien
                    </code>     
                </pre>
                <pre class="CSS"><h4>CSS</h4>
                    <code class="codeCSS">
encore du code à afficher, mais sans intéret
                    </code>
                </pre>
                <pre class="Js"><h4>JavaScript</h4>
                    <code class="codeJs">
idem, du code à afficher
                    </code>         
                </pre>
            </div>
        </div>

je ne pense pas que le CSS ait un intéret pour vous, donc je vous le mets pas.

par contre je vous mets mon code JS, pareil, uniquement le strict minimum…

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/*on repere le titre*/
var titre = document.getElementById(titreCodeVisionneuse);

//alert(titre.textContent); <-> ça c'était pour voir si l'erreur venait bien de getDocumentById, c'est le cas.
/*la fonction appelée par l'interruption*/
var auClic = function(){
    var code = titre.nextSibling;
    code.style.display=(getComputedStyle(code).display=="none"?"block":"none");
};
/*on ajoute l'écouteur*/
titre.addEventListener('click',auClic,false );

le fichier JS est appelé tout à la fin du fichier html, juste avant </body>.

bien entendu j'ai été chercher un peu sur internet les causes de cette erreur, et je dois avouer que j'ai pour l'instant rien trouvé de bien concret.

pour aider un peu, je dois dire qu'il y a plus haut dans le fichier JS d'autres appels à getDocumentById, qui fonctionnent normalement, donc l'erreur est bel et bien sur cette

autre info complémentaire, j'utilise un google chrome à jour pour tester en cours de dev', et là je viens d'essayer sur firefox, ça marche pas mieux. ça ne vient donc à priori pas d'un comportement idoine de navigateur.

EDIT: j'ai trouvé la source de cette erreur, j'avais oublié les quotes dans la fonction getDocumentById (quel boulet…)

mais j'au une bonne nouvelle, j'ai pas posté pour rien: la ligne 8 du javascript me lance une erreur comme quoi l'objet code est null. je vais chercher la source de l'erreur, et si je trouve, je reviens.

Édité par remace

Oui. Non. Attends, je regarde mieux et je te dis.

+0 -0

Cette réponse a aidé l'auteur du sujet

Euh, titreCodeVisionneuse là c'est une variable qui n'existe vraisemblablement pas. Ce n'est pas la chaîne 'titreCodeVisionneuse'

Mais je ne suis pas convaincu qu'un tel id pour cette remplir cette fonction soit nécessaire.

Édité par vibrice

+0 -0
Auteur du sujet

merci firm1 :P j'ai pas encore bien la structure du site en tête :P

vibrice: oui j'avais vu, mais j'avais oublié de cliquer sur envoyer sur le site pour prévenir plus tôt. ceci dit, maintenant j'ai un nouveau "bug". comme décrit précédemment, via EDIT, j'ai la fonction nextSibling qui me renvoie un pointeur null au lieu de l'élément voulu…

visiblement il faudra surement que je revoie le DOM et ses fonctions plus en détail. merci quand même de l'aide.

dans le doute, vibrice, pourquoi tu dis que cet id est pas nécessaire? enfin je veux dire, tu t'y prendrais comment pour faire ça du coup?

Édité par remace

Oui. Non. Attends, je regarde mieux et je te dis.

+0 -0

Je n'ai pas un très grand niveau non plus (et l'habitude d'utiliser jQuery)

Parce que le nextSibling correspond au noeud texte qui correspond à l'indentation entre les balises </h3> et <div class="code"> ?

enfin je veux dire, tu t'y prendrais comment pour faire ça du coup?

Ce n'était pas une affirmation mais pour réaliser ce genre de fonctions, perso, une classe me paraît plus logique, surtout si tu as plusieurs éléments à gérer de la sorte sur la même page. Et l'id ne sert pas plus à la gestion de l'événement puisque tu as l'élément à l'origine du click (ce serait peut être plus simple à gérer si l'ensemble était encapsulé dans un tout - travail sur une même arbo - plutôt que du nextSibling - frère - mais bon pourquoi pas).

Édité par vibrice

+0 -0

Cette réponse a aidé l'auteur du sujet

Pour compléter la réponse de vibrice. Je te conseille d'utiliser nextElementSibling si tu souhaites sélectionner un élément (TAG) HTML, sinon tu auras le droit de sélectionner tous les "TextNodes" qui sont entre l'élément actuel et celui que tu souhaites sélectionner.

Quelques messages pour approfondir :

+1 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte