Javascript Google事件侦听器：未捕获类型错误：无法读取属性'；增补列表器'；空的

我曾经问过这个关于addListenerOnce中的addListener的问题，这个问题不起作用，答案是我试图在呈现我要查找的元素之前添加click listener。问题是我不明白为什么它对前两项赛事有效。该事件来自图例的单击事件。前两个事件将同时出现。就像听者只工作1次。我曾尝试使用addListenerOnce调用第二个legend级别的事件，但该事件也处于空闲状态（如第一个legend），但根本不起作用

例如，我单击教员图例，然后单击fpa和fskm，效果非常好，但当我单击性别或教育程度，然后单击其各自的第二个图例时，会出现未捕获类型错误：无法读取属性“addEventListener”为null的错误。我甚至试过DOMContentLoaded，但仍然不起作用。我到底该怎么做？下面是代码，警报只是为了测试

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"); 
                });

        });

    }

var legend=document.createElement（'div'）；
legend.id='legend'；
var内容=[]；
内容推送（“查看选项”）；
内容推送（“一般”）；
内容推送（“教员”）；
内容推送（“性”）；
内容推进（“教育水平”）；
legend.innerHTML=content.join（“”）；
legend.index=1；
map.controls[google.maps.ControlPosition.RIGHT\u TOP].push（图例）；
var legendSpec=document.createElement（'div'）；
legendSpec.id='图例'；
var contentNew=[]；
google.maps.event.addListenerOnce（map'idle'，function（）{
var genOpt=document.getElementById（“通用”）；
google.maps.event.addDomListener（genOpt，'click'，function（）{
警报（“正常”）；
});
var sexOpt=document.getElementById（“sex”）；
google.maps.event.addDomListener（sexOpt，'click'，function（）{
contentNew=[]；
contentNew.push（“性”）；
contentNew.push（'Male'）；
contentNew.push（“女性”）；
legendSpec.innerHTML=contentNew.join（“”）；
legendSpec.index=1；
警报（“正常”）；
});
var facultyOpt=document.getElementById（“教员”）；
google.maps.event.addDomListener（facultyOpt，'click'，function（）{
contentNew=[]；
contentNew.push（“教员”）；
contentNew.push（'FSKM'）；
contentNew.push（“FPA”）；
legendSpec.innerHTML=contentNew.join（“”）；
legendSpec.index=1；
警报（“正常”）；
});
var levelOpt=document.getElementById（“级别”）；
google.maps.event.addDomListener（levelOpt，'click'，function（）{
contentNew=[]；
contentNew.push（“教育水平”）；
contentNew.push（'Degree'）；
contentNew.push（“文凭”）；
legendSpec.innerHTML=contentNew.join（“”）；
legendSpec.index=1；
警报（“正常”）；
});
控件[google.maps.ControlPosition.RIGHT_CENTER].push（legendSpec）；
调用（）；
});
函数调用（）{
google.maps.event.addListener（映射'mouseover'，函数（）{
var fskm=document.getElementById（“FSKMd”）；
google.maps.event.addDomListener（fskm，'click'，函数（）{
警报（“正常”）；
});
var fpa=document.getElementById（“FPAd”）；
google.maps.event.addDomListener（fpa，'click'，函数（）{
警报（“正常”）；
});
//fskm和fpa图例合并在一个图例中
var degree=document.getElementById（“degreeD”）；
google.maps.event.addDomListener（度，'click'，函数（）{
警报（“正常”）；
});
var文凭=document.getElementById（“文凭”）；
google.maps.event.addDomListener（文凭，'click'，函数（）{
警报（“正常”）；
});
var male=document.getElementById（“maleD”）；
google.maps.event.addDomListener（男性，'click'，函数（）{
警报（“正常”）；
});
var female=document.getElementById（“femaleD”）；
google.maps.event.addDomListener（女性，'click'，函数（）{
警报（“正常”）；
});
});
}

这意味着您的值为空-您没有对要添加事件侦听器的内容的正确引用

我假设当你提到教育水平时，你指的是：

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

如果是这样，

degreeD

不存在。也许您的HTML中有错误的名称

**根据评论更新答案**

由于该元素是动态添加的——当代码运行时，该元素不存在，这意味着对它的引用，正如您所发现的，

null

有两种方法可以解决这个问题

1） 将您的

degreeD

事件侦听器移动到

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

块，以便存在除油的

---

另一个选项是使用事件委派为可能还不存在的元素注册事件。我不太了解google.maps API，不知道它们是否支持事件委派，或者您是否必须手动处理。当用户单击levelOptSorry时，将加载degreeD。对此，我没有看到它隐藏在那里。我相应地更新了我的答案。它工作了，但好像只循环了一次。我该怎么说？例如，我单击该级别和特定级别对其进行过滤，但当我单击其他视图选项（如sex）时，特定的sex过滤器不起作用。a）设置一个函数以根据需要销毁和重新创建事件侦听器，然后在每次发生更改时调用该函数，或b）查看设置事件委派。在StackOverflow上有许多这样的例子，但它们可能不会处理