0

このコードでは、json 配列から派生した配列を反復処理しようとしています。ページ内に SVG があります。国をクリックすると、名前が URL に送信されます。残念ながら、 -->error で示されている行で次のエラーが発生します

キャッチされていない 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);
4

2 に答える 2

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
    }
}
于 2013-10-19T01:28:03.640 に答える
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']、 jQuery に渡す文字列として'#' + item.join(', #')取得"#a, #b, #c"されます: これらの要素のいずれかがページに存在しない場合、マウスダウン リスナーは単純に勝ちましたエラーを発生させることなく、添付できません。

注：このtext変数がどこから来たのかわからないので、元の例にあるため、そこに置きました。

于 2013-10-19T07:34:00.300 に答える