document.getElementById() is null

Version imprimable

Bonjour,
j'ai les deux fonctions suivantes :

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
 
create: function (num, val)
    {
        const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
        var i = document.createElementNS(XUL_NS, "treeitem");
        var r = document.createElementNS(XUL_NS, "treerow");
        var c1 = document.createElementNS(XUL_NS, 'treecell');
        var c2 = document.createElementNS(XUL_NS, 'treecell');
        var c3 = document.createElementNS(XUL_NS, 'treecell');
 
        i.setAttribute("container", true);
        i.setAttribute("open", true);
 
        c1.setAttribute("label", num);
        c2.setAttribute("label", val);
        c3.setAttribute("value", false);
 
        r.appendChild(c1); 
        r.appendChild(c2);
        r.appendChild(c3);
 
        i.appendChild(r);
 
        return i;
    }

Code:

1
2
3
4
5
6
7
8
9
10
11
 
fonction: function (liste){
        try{
            root = document.getElementById("treeScenariosRoot"); //Element créé dans le code html
            for(o in liste){
	 	root.appendChild(create(liste[o].id, liste[o].name));
                document.getElementById(liste[o].id).addEventListener("click", alert("Banane"), false);
	    }                        
        }
        catch(e){ alert(e); }	
}

J'obtiens un message d'erreur me disant que

Citation:

document.getElementById(...) is null

et je ne vois pas d'où ça peut venir. Je n'arrive pas à accéder à mes éléments.
L'erreur peut sembler simple, je début en javascript :D

19/04/2013, 11h16
-Rpass-

Code:

document.getElementById(liste[o].id).addEventListener("click", alert("Banane"), false);

C'est moi ou tu as mis la lettre o, liste[o] me semble bizarre non ?
19/04/2013, 11h21
FooFighters

Oui c'est bien la lettre o, je parcours ma liste et j'essaie d'ajouter un eventListener sur chaque élément créé.

Dans tous les cas que j'ai pu voir sur internet, on faisait un getElementById sur un élément prédéfini dans le code html. Or dans mon cas il s'agit d'un élément créé grâce à ma fonction create mais qui n'est pas explicitement défini dans le code html cela aurait-il un rapport ?
19/04/2013, 11h28
Bovino

Heu... tu te mélanges un peu les pédales là... :koi:

Code:

document.getElementById(liste[o].id)

pourquoi pas, mais si

Citation:

il s'agit d'un élément créé grâce à ma fonction create

je ne vois pas dans ta fonction create() à quel endroit tu attribues un id ! :aie:
19/04/2013, 11h32
Kaamo

Et pourquoi ne pas attacher l'événement dans la fonction create ? A la création des éléments directement !
19/04/2013, 11h37
FooFighters

Ah oui effectivement...
C'est exactement ce que j'allais proposer kaamo ^^
J'ai essayé de rajouter cette ligne :

Code:

i.addEventListener("click", alert("Banane"), false);

Le soucis c'est que ma boîte d'alerte avec "Banane" s'affiche toute seule chaque fois qu'un élément est créé sans pour autant que j'ai cliqué sur un élément.
19/04/2013, 12h16
NoSmoking
Bonjour,

Code:

document.getElementById(liste[o].id).addEventListener("click", alert("Banane"), false);

pourquoi ne pas mettre directement
Code:

1 2 3 liste[o].onclick = function(){ alert('Banane'); };
ou alors il y a un truc que je n'ai pas compris!

Ce qui me surprend c'est effectivement le root.appendChild(create(liste[o].id, liste[o].name));, il semblerait donc que liste[o] n'est pas un élément DOM.
19/04/2013, 12h26
Kaamo
Citation:

Le soucis c'est que ma boîte d'alerte avec "Banane" s'affiche toute seule chaque fois qu'un élément est créé sans pour autant que j'ai cliqué sur un élément.

Il faut l'encapsuler dans une fonction anonyme. Comme le suggère @NoSmoking.

Dans la fonction create direcement :
Code:

1 2 3 i.onclick = function(){ alert('Banane'); };
19/04/2013, 12h26
FooFighters

Avec le onclick je n'ai plus la boîte d'alerte à chaque création d'élément mais je n'ai pas de réaction au clic. C'est peut être une piste, je vais essayer de voir ça.

En fait liste contient la réponse à une reqûete json sous forme d'un tableau.
19/04/2013, 12h36
NoSmoking
Citation:

En fait liste contient la réponse à une reqûete json sous forme d'un tableau.

donc pas un objet DOM.

J'aurais tendance, sans avoir une vue d'ensemble, à faire
Code:

1 2 3 4 5 6 7 for (o in liste) { var objet = create(liste[o].id, liste[o].name); root.appendChild(objet); objet.onclick = function(){ alert('Banane'); }; }
19/04/2013, 13h38
FooFighters

Ce que tu proposes de faire, NoSmoking, revient au même finalement. Ça fait la même chose. Je n'ai pas de réaction au clic. Le problème après vient peut être des éléments. Je suis en train de voir ça.
19/04/2013, 14h51
NoSmoking

Citation:

Ce que tu proposes de faire, NoSmoking, revient au même finalement.

non car on n'utilise pas d'ID dans ce cas, dans ta fonction create(), tu fixes où l'ID de l'élément crée?

Ah oui effectivement, dans tous les cas j'ai toujours ce problème.
J'ai pourtant essayé un test simple en rajoutant un bouton qui a pour id "ID" dans mon fichier html et j'ai ceci dans mon fichier js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 test: function () { alert("Kiwi"); }, fonction: function (){ root = document.getElementById("kiwi"); //Element créé dans le code html for(o in liste) { root.appendChild(create(liste[o].id, liste[o].name)); } document.getElementById("ID").onClick = test(); }
Pourtant dès l'arrivée de la page la boîte d'alerte apparaît d'elle même.

19/04/2013, 16h00
Kaamo
Comme dit plus haut ...

Citation:

Il faut l'encapsuler dans une fonction anonyme.

Le fait de mettre () exécute directement ton code. Deux solutions :
- Soit tu passes la référence de la fonction, sans l'exécuter donc :

Code:

document.getElementById("ID").onclick = test;

- Soit tu l'encapsules dans une fonction anonyme :
Code:

1 2 3 document.getElementById("ID").onclick = function() { test(); }
ou encore
Code:

1 2 3 document.getElementById("ID").onclick = function() { alert("Kiwi"); }
EDIT : NoSmoking :yaisse2:
19/04/2013, 16h01
NoSmoking
Code:

document.getElementById("ID").onClick = test();

ici tu affectes le résultat de la fonction à un événement ce qui ne veut pas dire grand chose.

Code:

document.getElementById("ID").onclick = test;

ou encore
Code:

1 2 3 document.getElementById("ID").onclick = function(){ alert("Objet clicqué!"); };
19/04/2013, 16h30
FooFighters

Je viens de trouver la solution, ce n'était pas du tout à ce niveau là malgré les erreurs de syntaxe que vous m'avez signalé.
Il fallait toucher plus au DOM qu'au fichier js, c'est un peu compliqué à expliquer en tout cas merci pour vos contributions :P
19/04/2013, 19h10
NoSmoking

Citation:

Envoyé par Kaamo

EDIT : NoSmoking :yaisse2:

facile je tape avec un doigt .... :langue:

Citation:

Envoyé par FooFighters

Je viens de trouver la solution,(...)Il fallait toucher plus au DOM qu'au fichier js, c'est un peu compliqué à expliquer ...

Alors non content de mettre fait "grilled" par Kaamo il faut que je sois frustré par FooFighters.

Un forum est un endroit où l'on reçoit mais également où l'on peut donner, l'ordre important peu.

Ces échanges font la richesse de tous dans la mesure où chaque réponse est un apport potentiel à nos futures interventions.

Donc dommage de claquer la porte, même si tu t'excuses ;)
19/04/2013, 19h14
FooFighters

Ce n'est pas du tout que je ne veuille pas partager loin de là, c'est juste que c'est une architecture que je ne maîtrise pas encore et je n'ai pas assez compris mes modifications pour les expliquer :roll:
22/04/2013, 11h50
Kaamo

Citation:

c'est juste que c'est une architecture que je ne maîtrise pas encore et je n'ai pas assez compris mes modifications pour les expliquer

Dis toujours, on pourra peut-être te donner une explication :ccool: