Google事件侦听器:未捕获类型错误:无法读取属性'addEventListener'为null

我以前问过这个关于addListener中的addListener的问题。一旦这个问题不起作用，答案是我试图在呈现我要查找的元素之前添加click listener。问题是我不明白为什么它适用于前两名的赛事。该事件来自传奇的点击事件。排名前两位的活动将同时出现。这就像听众只工作了1次。我尝试过使用addListenerOnce，该事件也处于空闲状态（如第一个图例），用于调用第二个图例级别的事件，但它根本不起作用。

例如，我单击Faculty图例，然后单击fpa和fskm，效果非常好，但当我单击Sex或Level of Education，然后单击它们各自的第二个图例时，会出现Uncaught TypeError的错误：无法读取null的属性"addEventListener"。我甚至尝试过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"); 
                });
        });
    }