Google Ereignis-Listener: Uncaught TypeError: Kann die Eigenschaft 'addEventListener' von null nicht lesen

Question

Ich habe diese Frage zuvor über den addListener in der addListenerOnce gestellt, die nicht funktioniert, und die Antwort ist, ich habe versucht, den Klick-Listener vor dem Element I hinzuzufügen habe gesucht wurde gerendert. Das Problem ist, ich kann nicht verstehen, warum es für die Top-2-Veranstaltung funktioniert. Das Ereignis kommt vom Klickereignis der Legende. Die beiden ersten Ereignisse werden zusammen angezeigt. Es ist so, als ob der Zuhörer nur 1 Mal arbeitet. Ich habe versucht, addListenerOnce zu verwenden und das Ereignis ist auch leer (wie die 1. Legende), um das Ereignis der 2. Legendenebene aufzurufen, aber es funktioniert überhaupt nicht.

Zum Beispiel, ich klicke auf die Fakultät Legende und klicken Sie dann auf fpa und fskm, es funktioniert einfach wunderbar, aber wenn ich auf Sex oder Bildungsniveau klicken Sie dann auf ihre jeweilige 2. Legende der Fehler von Uncaught TypeError: Kann Eigenschaft 'addEventListener' nicht lesen von Null kommt heraus. Ich habe sogar den DOMContentLoaded versucht, funktioniert immer noch nicht. Wie um alles in der Welt mache ich das? Unten ist der Code, der Alarm ist nur zu testen.

var legend = document.createElement('div'); 
    legend.id = 'legend'; 
    var content = []; 
    content.push('<h3><b>View option</b></h3>'); 
    content.push('<div id="general"><svg height="20" width="200"><g><rect width="15" height="12"class="general" ></g><g><text x="26" y="10">General</text></g></svg></div>'); 
    content.push('<div id="faculty"><svg height="20" width="200"><g><rect width="15" height="12"class="nothing"></g><g><text x="26" y="10">Faculty</text></g></svg></div>'); 
    content.push('<div id="sex"><svg height="20" width="200"><g><rect width="15" height="12"class="nothing"></g><g><text x="26" y="10">Sex</text></g></svg></div>'); 
    content.push('<div id="level"><svg height="20" width="200"><g><rect width="15" height="12"class="nothing"></g><g><text x="26" y="10">Level of education</text></g></svg></div>'); 
    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('<h3><b>Sex</b></h3>'); 
      contentNew.push('<div id="maleD"><svg height="20" width="200"><g><rect width="15" height="12"class="male" ></g><g><text x="26" y="10">Male</text></g></svg></div>'); 
      contentNew.push('<div id="femaleD"><svg height="20" width="200"><g><rect width="15" height="12"class="female"></g><g><text x="26" y="10">Female</text></g></svg></div>'); 
      legendSpec.innerHTML = contentNew.join(''); 
      legendSpec.index = 1; 
      alert("ok"); 
     }); 

     var facultyOpt = document.getElementById("faculty"); 
     google.maps.event.addDomListener(facultyOpt, 'click', function() { 
      contentNew = []; 
      contentNew.push('<h3><b>Faculty</b></h3>'); 
      contentNew.push('<div id="FSKMd"><svg height="20" width="200"><g><rect width="15" height="12"class="FSKM" ></g><g><text x="26" y="10">FSKM</text></g></svg></div>'); 
      contentNew.push('<div id="FPAd"><svg height="20" width="200"><g><rect width="15" height="12"class="FPA"></g><g><text x="26" y="10">FPA</text></g></svg></div>'); 
      legendSpec.innerHTML = contentNew.join(''); 
      legendSpec.index = 1; 
      alert("ok"); 
     }); 

     var levelOpt = document.getElementById("level"); 
     google.maps.event.addDomListener(levelOpt, 'click', function() { 
      contentNew = []; 
      contentNew.push('<h3><b>Level of Education</b></h3>'); 
      contentNew.push('<div id="degreeD"><svg height="20" width="200"><g><rect width="15" height="12"class="degree" ></g><g><text x="26" y="10">Degree</text></g></svg></div>'); 
      contentNew.push('<div id="diplomaD"><svg height="20" width="200"><g><rect width="15" height="12"class="diploma"></g><g><text x="26" y="10">Diploma</text></g></svg></div>'); 
      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"); 
       }); 

     }); 

    } 

Answer 1

Es bedeutet, dass Ihr Wert null ist - Sie brauchen keinen richtigen Bezug haben, was auch immer Sie versuchen, den Ereignis-Listener hinzuzufügen.

Ich gehe davon aus, dass, wenn Sie auf Bildungsniveau beziehen, die Sie sich beziehen, dies zu:

var degree = document.getElementById("degreeD"); 

Wenn ja, degreeD existiert nicht. Vielleicht haben Sie den falschen Namen in Ihrem HTML.

** Aktualisiert Antwort basierend auf Kommentare **

Da das Element dynamisch hinzugefügt wird - wenn der Code ausgeführt wird, dass das Element nicht vorhanden ist, was bedeutet, dass die Bezugnahme auf sie ist, wie Sie entdeckt, null .

Es gibt zwei Möglichkeiten, damit umzugehen.

1) Bewegen Sie degreeD Ereignis-Listener innerhalb des

google.maps.event.addDomListener(levelOpt, 'click', function() { 

Block, so dass degreeD existiert.

Die andere Option besteht darin, mithilfe der Ereignisdelegierung ein Ereignis für ein Element zu registrieren, das möglicherweise noch nicht vorhanden ist. Ich kenne die google.maps-API nicht gut genug, um zu wissen, ob sie die Ereignisdelegierung unterstützen oder ob Sie diese manuell behandeln müssen.