Problème avec getElementById

Bonjour,

j'ai les deux fonctions suivantes :

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

fonction: function (liste){
   	try{
       	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(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 :)

Bin le plus probable est que tu n'as pas d'élément ayant l'id "kiwi" dans ta page.

Non j'ai la garantie que mon "kiwi" existe bien, c'est au niveau de mon deuxième getElementById.

Et t'as testé sur quel id il bloque ?

Mets un console.log(liste[o].id) juste avant l'appel de getElementById pour voir.

Oui j'ai testé et j'ai bien l'id de mon élément qui s'affiche.

Ouais mais est-ce qu'il exite bien en html dans ta page. C'est le create qui chie dans la colle à mon avis.

Plutôt que de faire

root.appendChild(create(liste[o].id, liste[o].name));

Essaye

var newChild = document.createElement("div");
newChild.setAttribute("id", liste[o].id);
newChild.innerHTML = liste[o].name;
root.appendChild(newChild);

Avant de tester les événements, je vois que ça ne m'affiche plus aucun élément

Je pense avoir une piste, j'ai rajouté cette ligne dans ma fonction create :

i.setAttribute("id", num);

Et maintenant je peux faire mon getElementById seulement le problème 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é dessus...

essaye function(){ alert('banane'); } à la place de alert('banane');

Sinon pour ton getElementById qui est null, pourquoi passer par un getElementById sur un élément que tu as créé juste avant ?

Pose le simplement dans une variable et réutilise le direct.

ça sera beaaaucoup plus simple, et beaucoup plus rapide.

du style :

test:function(){ alert('Banane'); }

fonction: function (liste){
   	try{
       	root = document.getElementById("kiwi"); //Element créé dans le code html
       	var current;
       	for(o in liste){
                       current = create(liste[o].id, liste[o].name);
               	root.appendChild(current);
       		current.addEventListener("click", test, false);
   		}
   	}
   	catch(e){ alert(e); } 
}

J'ai modifié comme tu m'as dis mais j'ai rien qui réagit aux clics.

Bon je vais laisser tomber cette manière de faire, je vais voir autre chose. Merci pour votre aide.

dur de faire du debug sans retour :/

C'est bon le problème est résolu, il fallait plus toucher au fichier xul qu'au fichier js, c'est un peu compliqué à expliquer ici :)

En tout cas merci pour vos contributions.