getDocumentById retourne null

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.

Bonjour, je déplace ton sujet dans le forum Site Web.

Il y'aura sans doute plus de monde là bas pour te répondre.

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

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?

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).