使用这段代码,我试图迭代一个从json数组派生的数组。 页面内有一个SVG。 当我点击某个国家/地区时,该名称应该提交给一个网址。 不幸的是,我在 - >错误
指示的行中收到以下错误未捕获的TypeError:无法调用null的方法'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);
答案 0 :(得分:1)
在尝试附加事件处理程序之前,您没有检查元素是否存在;如果该元素不存在,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
}
}
答案 1 :(得分:0)
发生异常是因为在页面中没有给出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
),使用普通ID,如['a', 'b', 'c']
,'#' + item.join(', #')
,您将获得"#a, #b, #c"
1}}作为传递给jQuery的字符串:如果页面中不存在这些元素,则不会附加mousedown监听器,不会引发任何错误。
注意:不确定此text
变量的来源,我只是放在那里,因为在原始示例中。