How to get value from listbox listitem

Question

In my firefox addon I have a <listbox>. I want to be able to work a javascript function when I left-click on an item in the box. The function should retrieve the item's textual value.

Now, my function does get called when I click on a listitem, as I've placed this in my event listener's onLoad call:

    var myListBox = document.getElementById("myListBoxID");
    myListBox.addEventListener("click", function(event){
        var target = event.target;
        while (target && target.localName != "listitem"){
            target = target.parentNode;
        }
        if (!target){
            return;   // Event target isn't a list item
        }
        alert(target);                                  //returns blank
        alert(target.id);                               //returns blank
        alert(target.getAttribute("value"));        //returns blank
        alert(target.getAttribute("text"));     //returns blank
        alert(target.getAttribute("id"));           //returns blank

        var targetid = document.getElementById(target.id);
        alert(targetid);                                //returns null
    }, false);      
},

The xul goes something like this:

<listbox id="listbox1">
    <listcols /><listcol flex="1"/><listcol flex="1"/></listcols>
    <listitem><listcell class="column1" label="label1" value="value1"</listcell><listcell label="cell1"></listcell></listitem>
    <listitem><listcell class="column2" label="label2" value="value2"</listcell></listitem><listcell label="cell2"></listcell>
</listbox>

However, I can't get it to display the text of the items. As you can see above, I don't seem to have a proper handle on the target

I've gotten the original code from here, and got the EventListener working here.

How can I get the value of the listcells? I've tried everything!

Answer 1

You are using this code:

while (target && target.localName != "listitem"){
    target = target.parentNode;
}

It will go up from the actual click target looking for a <listitem> tag. Yet the text isn't stored in the <listitem> tag, it's in the <listcell> - so you simply should be looking for that one in the hierarchy:

while (target && target.localName != "listcell"){
    target = target.parentNode;
}
alert(target.getAttribute("value"));

Answer 2

You can't detect a click on just a listcell. The closest you can go is to detect a click on a listitem. After that, you have to drill down using code.

So, use .childNode on your target. Since you have only two listcells in your listitem, if you are trying to capture the second cell, use childNodes[1]. `childNodes[0] will refer to the first cell.

onLoad: function(){
    var mylistbox= document.getElementById("mylistboxID");
    mylistbox.addEventListener("click", function(event){
        var target = event.target.childNodes[1];
        if (!target){
            return;   // In case there is not target
        }
        alert(target.getAttribute("label") + target.getAttribute("label"));
    }, false);      
},