Discussion :

[FooFighters]

Bonjour,
j'ai les deux fonctions suivantes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
    }

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[-Rpass-]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[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 ?

[Bovino]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById(liste[o].id)

pourquoi pas, mais si

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 !

[Kaamo]

Et pourquoi ne pas attacher l'événement dans la fonction create ? A la création des éléments directement !

[FooFighters]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[NoSmoking]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

pourquoi ne pas mettre directement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Kaamo]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
i.onclick = function(){
  alert('Banane');
};

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

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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');
  };
}

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

[NoSmoking]

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?

[FooFighters]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Kaamo]

Comme dit plus haut ...

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

- Soit tu l'encapsules dans une fonction anonyme :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou encore

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.getElementById("ID").onclick = function() {
  alert("Kiwi");
}

EDIT : NoSmoking

[NoSmoking]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou encore

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.getElementById("ID").onclick = function(){
  alert("Objet clicqué!");
};

[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

[NoSmoking]

EDIT : NoSmoking

facile je tape avec un doigt ....

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

[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

[Kaamo]

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