Question

I’m trying to create a Singleton object that deals with servicing an event listener:

var ChildParent = (function () {
   var html_element = document.getElementById("quoteNum");
   var row_number = 0;

   return {
       init: function(){
           html_element["parenttype"+row_number].addEventListener("click", ChildParent.fire, false);
       },
       add: function(total) { //Adding a row

       },
       fire: function() {
           alert("it fired!");
       }
   } 
})();

However, when I call ChildParent.init(), the document-element will not get assigned to html_element, so i can’t attach the listener. Oddly enough, the row_number variable is initialized to zero. Is there some sort of scoping conflict that I don’t understand? When i use the step-into feature of opera’s dragonfly, I can’t create var assignments when in the init() function.

Answer 1

Make sure element with id “quoteNum” is available on the page when you are executing your script.
It may happen that you are executing the script without waiting for all the page elements to be rendered.

You may think about handling window.onload.

Update

the following change could help you fix the issue with html_element being initialized before the page is rendered.

var ChildParent = (function () {
   function getElement(){
       return html_element ? html_element : html_element = document.getElementById("quoteNum");
   }

   var html_element;
   var row_number = 0;

   return {
       init: function(){
           getElement()["parenttype"+row_number].addEventListener("click", ChildParent.fire, false);
       },
       add: function(total) { //Adding a row

       },
       fire: function() {
           alert("it fired!");
       }
   } 
})();