Making XUL Live
¥function addItem() {
¥  var listbox = document.getElementById("itemlist");
¥  var listitem = document.createElement("listitem");
¥  var labelfield = document.getElementById("labelfield");
¥  listbox.appendChild(listitem);
¥  listitem.label = labelfield.value;
¥  labelfield.value = "";
¥  validateInput();
¥  labelfield.focus();
¥}
¥
¥function validateInput() {
¥  var field = document.getElementById("labelfield");
¥  var button = document.getElementById("addButton");
¥  button.disabled = field.value == "";
¥}
In the script file, two functions are implemented to handle input events.

The first one adds a valid item to the list, by constructing XUL nodes using the W3C DOM API, setting properties and then appending them to the list node.

The second one checks the value of the text box every time the user enters a key while the field is focused, making sure the ÒAdd ItemÓ button is only ever enabled when the value in the field is not blank.

LetÕs see how this all comes togetherÉ