用於數組元素的addEventListener

用這段代碼我試圖遍歷從json數組派生的數組。頁面內有一個SVG。當我點擊一個國家時，這個名字應該被提交給一個URL。不幸的是我得到在該行下面的錯誤與指示 - >錯誤用於數組元素的addEventListener

遺漏的類型錯誤：無法調用空

的方法「的addEventListener」我怎樣才能克服這種錯誤？爲什麼會發生？

數組是這樣的：

{"Countries":["india","switzerland","usa","alaska","germany","austria","netherlands","france","italy","spain","poland","hungary","czech","romania","russia","china","mexico","brazil","britain","thailand","sweden","uae","new_zealand_north_island","new_zealand_south_island","egypt"]} 




var mySVG = document.getElementById("VectorMap"); 
var svgDoc; 
mySVG.addEventListener("load", function() { 
    svgDoc = mySVG.contentDocument; 

    $.getJSON("http://www.someurl.com/jsonArray", 
     function (data) { 
      $.each(data, function (index, item) { 

       var i=0; 
       for (tot=item.length; i < tot; i++) { 
       var someElement = svgDoc.getElementById(item[i]); 
       //--->error 
       someElement.addEventListener("mousedown", function() { 
        $("#info").html(ajax_load).load("http://www.someurl.com/returnData"+"?country="+text); 

       }, false); //add behaviour 
       } 

      }); 
     }); 
}, false);

來源

2013-10-19 user 1007017

你不檢查試圖連接的事件處理程序之前是否存在的元素;如果元素不存在，getElementById()將返回null。這段代碼會有這個檢查。

var someElement; 

for (var i = 0, tot = item.length; i < tot; i++) { 
    someElement = svgDoc.getElementById(item[i]); 

    if (someElement) { 
     someElement.addEventListener("mousedown", function() { 
      $("#info") 
       .html(ajax_load) 
       .load("http://www.someurl.com/returnData"+"?country="+text);  
     }, false); //add behaviour 
    } 
}

來源

2013-10-19 01:28:03

發生異常是因爲在頁面中沒有給出id的元素。在這種情況下，getElementById返回null：您可以通過瀏覽器中的Web控制檯/調試器進行檢查，此id不存在，以及它是否應該存在 - 因此您有錯誤或錯字。

無論如何，你可以利用jQuery。因爲在jQuery中你可以傳遞一個id列表，並且監聽器只會附加到實際在頁面中的那些元素，而不會拋出異常。所以你的情況，而不是：

var i=0; 
for (tot=item.length; i < tot; i++) { 
    var someElement = svgDoc.getElementById(item[i]); 
    //--->error 
    someElement.addEventListener("mousedown", function() { 
     $("#info").html(ajax_load).load("http://www.someurl.com/returnData"+"?country="+text); 

    }, false); //add behaviour 
}

你可以簡單地有：

$('#' + item.join(', #')).on('mousedown', function() { 
    $("#info").html(ajax_load).load("http://www.someurl.com/returnData"+"?country="+text); 
});

所以基本上，假設item是一個數組（因此我稱之爲items）與普通的IDS，如['a', 'b', 'c'] ，'#' + item.join(', #')您將獲得"#a, #b, #c"作爲字符串傳遞給jQuery：如果這些元素中的任何元素不存在於頁面中，則mousedown偵聽器將不會被附加，而不會引發任何錯誤。

注意：不知道這個text變量來自哪裏，我只是放在那裏，因爲在您的原始示例中。

來源

2013-10-19 07:34:00 ZER0

用於數組元素的addEventListener

回答

相關問題