title: Google Event Listener: Uncaught TypeError: Cannot read property 'addEventListener' of null
body: <p>I've asked this question before about the addListener in the addListenerOnce that does not work and the answer is I tried to add the click listener before the element I'm looking for has been rendered. The problem is I can't understand why does it work for the top two event. The event come from the click event of legend. The top two event will appear together. It's like the listener only work for 1 times. I've tried to use addListenerOnce and the event is idle too (like the 1st legend) for calling the event of 2nd legend level, but it does not work at all. </p>
  
  <p>For example, I click the Faculty legend and then click fpa and fskm, it work just wonderful but when I click Sex or Level of Education then click their respective 2nd legend the error of Uncaught TypeError: Cannot read property 'addEventListener' of null comes out. I've even try the DOMContentLoaded, still not working. Just how on earth do I do this? Below is the code, the alert is just to test.</p>
  
  <pre><code>var legend = document.createElement('div');
      legend.id = 'legend';
      var content = [];
      content.push('&lt;h3&gt;&lt;b&gt;View option&lt;/b&gt;&lt;/h3&gt;');
      content.push('&lt;div id="general"&gt;&lt;svg height="20" width="200"&gt;&lt;g&gt;&lt;rect width="15" height="12"class="general" &gt;&lt;/g&gt;&lt;g&gt;&lt;text x="26" y="10"&gt;General&lt;/text&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;');
      content.push('&lt;div id="faculty"&gt;&lt;svg height="20" width="200"&gt;&lt;g&gt;&lt;rect width="15" height="12"class="nothing"&gt;&lt;/g&gt;&lt;g&gt;&lt;text x="26" y="10"&gt;Faculty&lt;/text&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;');
      content.push('&lt;div id="sex"&gt;&lt;svg height="20" width="200"&gt;&lt;g&gt;&lt;rect width="15" height="12"class="nothing"&gt;&lt;/g&gt;&lt;g&gt;&lt;text x="26" y="10"&gt;Sex&lt;/text&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;');
      content.push('&lt;div id="level"&gt;&lt;svg height="20" width="200"&gt;&lt;g&gt;&lt;rect width="15" height="12"class="nothing"&gt;&lt;/g&gt;&lt;g&gt;&lt;text x="26" y="10"&gt;Level of education&lt;/text&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;');
      legend.innerHTML = content.join('');
      legend.index = 1;
      map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend);
      var legendSpec = document.createElement('div');
      legendSpec.id = 'legend';
      var contentNew = [];
  
      google.maps.event.addListenerOnce(map, 'idle', function() {
  
          var genOpt = document.getElementById("general");
          google.maps.event.addDomListener(genOpt, 'click', function() {
              alert("ok"); 
          });
  
          var sexOpt = document.getElementById("sex");
          google.maps.event.addDomListener(sexOpt, 'click', function() {
              contentNew = [];
              contentNew.push('&lt;h3&gt;&lt;b&gt;Sex&lt;/b&gt;&lt;/h3&gt;');
              contentNew.push('&lt;div id="maleD"&gt;&lt;svg height="20" width="200"&gt;&lt;g&gt;&lt;rect width="15" height="12"class="male" &gt;&lt;/g&gt;&lt;g&gt;&lt;text x="26" y="10"&gt;Male&lt;/text&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;');
              contentNew.push('&lt;div id="femaleD"&gt;&lt;svg height="20" width="200"&gt;&lt;g&gt;&lt;rect width="15" height="12"class="female"&gt;&lt;/g&gt;&lt;g&gt;&lt;text x="26" y="10"&gt;Female&lt;/text&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;');
              legendSpec.innerHTML = contentNew.join('');
              legendSpec.index = 1;
              alert("ok"); 
          });
  
          var facultyOpt = document.getElementById("faculty");
          google.maps.event.addDomListener(facultyOpt, 'click', function() {
              contentNew = [];
              contentNew.push('&lt;h3&gt;&lt;b&gt;Faculty&lt;/b&gt;&lt;/h3&gt;');
              contentNew.push('&lt;div id="FSKMd"&gt;&lt;svg height="20" width="200"&gt;&lt;g&gt;&lt;rect width="15" height="12"class="FSKM" &gt;&lt;/g&gt;&lt;g&gt;&lt;text x="26" y="10"&gt;FSKM&lt;/text&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;');
              contentNew.push('&lt;div id="FPAd"&gt;&lt;svg height="20" width="200"&gt;&lt;g&gt;&lt;rect width="15" height="12"class="FPA"&gt;&lt;/g&gt;&lt;g&gt;&lt;text x="26" y="10"&gt;FPA&lt;/text&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;');
              legendSpec.innerHTML = contentNew.join('');
              legendSpec.index = 1;
              alert("ok"); 
          });
  
          var levelOpt = document.getElementById("level");
          google.maps.event.addDomListener(levelOpt, 'click', function() {
              contentNew = [];
              contentNew.push('&lt;h3&gt;&lt;b&gt;Level of Education&lt;/b&gt;&lt;/h3&gt;');
              contentNew.push('&lt;div id="degreeD"&gt;&lt;svg height="20" width="200"&gt;&lt;g&gt;&lt;rect width="15" height="12"class="degree" &gt;&lt;/g&gt;&lt;g&gt;&lt;text x="26" y="10"&gt;Degree&lt;/text&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;');
              contentNew.push('&lt;div id="diplomaD"&gt;&lt;svg height="20" width="200"&gt;&lt;g&gt;&lt;rect width="15" height="12"class="diploma"&gt;&lt;/g&gt;&lt;g&gt;&lt;text x="26" y="10"&gt;Diploma&lt;/text&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;');
              legendSpec.innerHTML = contentNew.join('');
              legendSpec.index = 1;
              alert("ok"); 
          });
  
          map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(legendSpec);
          calling();
      });
  
      function calling() {
          google.maps.event.addListener(map, 'mouseover', function () {
  
              var fskm = document.getElementById("FSKMd");
              google.maps.event.addDomListener(fskm, 'click', function () {
                  alert("ok"); 
              });
  
              var fpa = document.getElementById("FPAd");
              google.maps.event.addDomListener(fpa, 'click', function () {
                  alert("ok"); 
              });
  //fskm and fpa legend come together in 1 legend
  
                  var degree = document.getElementById("degreeD");
                  google.maps.event.addDomListener(degree, 'click', function () {
                      alert("ok"); 
                  });
  
                  var diploma = document.getElementById("diplomaD");
                  google.maps.event.addDomListener(diploma, 'click', function () {
                      alert("ok"); 
                  });
  
  var male= document.getElementById("maleD");
                  google.maps.event.addDomListener(male, 'click', function () {
                      alert("ok"); 
                  });
  
                  var female= document.getElementById("femaleD");
                  google.maps.event.addDomListener(female, 'click', function () {
                      alert("ok"); 
                  });
  
          });
  
      }
  </code></pre>