Nothing happens with my event listener on click in javascript - events

Question

I have these functions :
createTreeItem: 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);
i.addEventListener("click", test, false);
return i;
}
test: function ()
{
alert("zero");
}
func: function (liste)
{
try
{
root = document.getElementById("treeRoot");
var current;
for(o in liste)
{
current = createTreeItem(liste[o].id, liste[o].nom_scenario);
root.appendChild(current);
}
}
catch(e)
{
alert(e);
}
}
I am creating elements in a tree and I would like to add event listeners on each element created. The problem is that nothing happens.
In the code, Liste is the response of a json request. It contains all the elements I want to create in my xul file.

Answer 1

I'm not super familiar with this syntax, but my bet is that the test function isn't being 'hoisted' because of how it's being defined. try moving the 'test' function above the 'createTreeItem' function or just defining test like so:
function test() {
...
}
That way when it gets evaluated it will be 'hoisted' to the top so that when you try to add it as the action for the click event, it'll be defined. Not 100% sure this is correct but if I had to bet...