Question

我正在尝试创建一个带有svg路径的交互式地图，你可以在我的codepen（最后）js代码中看到每次我点击一个国家我希望在一个模态中显示他们的力量名称，年份和国家名称，直到现在我添加到英国和法国的eventListener -click-

因此，当我单击其中一个时，eventListener会调用函数文本，该文本应该从我的代码中的数组中获取参数，并将其传递给函数的参数，该函数包含带有innerHtml的3 getElementById。

问题是只有法国的一个eventListener传递了出现在页面中心的模态中的文本数据并且工作但奇怪的是如果我将在js文件中删除它的evetListener其中一个重新加载页面后，英国开始工作并传递文本数据。

请仔细查看我的codepen（最后）点击他们的Id在javascript中有eventListener（click）的两个国家/地区，但只有js中最后一个eventListener（法国）的文本才能生效。< / p>

所以主要的一点是我想点击国家并通过创建不同的eventListeners来显示关于它们的不同信息，也许这样做是错误的但是我对js很新，直到现在我不能更深入了

codepen 首先看看我的js代码：

     //Variable and eventListener 1
var RoyalAirForce = ["Royal Air Force", "1 April 1918", "United Kindom"];

document.getElementById("gb-gbn-5").addEventListener("click",
 text(RoyalAirForce[0],RoyalAirForce[1],RoyalAirForce[2],RoyalAirForce[3])

);


//Variable and eventListener 2 (**Only this one is working, when removed the other one start to work**)
var France = ["France","France2","France3"];

document.getElementById("fr-7").addEventListener("click",
 text(France[0],France[1],France[2])

);


//Functions which should pass parameters
function text(param1, param2, param3){

  document.getElementById("name").innerText = param1;
      document.getElementById("founded").innerHTML =param2;      
  document.getElementById("country").innerHTML = param3;

}

我忘了告诉你，如果你点击页面上的任何地方会出现模态，但是当我点击不同的国家时，我想要有不同的信息。

Answer 1

Vanilla Javascript确实处理传递给eventListener调用函数的参数。基本上GB / FR的事件监听器从未被调用，只有btn.onclick用于显示模态被调用。解决方法是定义一个新的变量/函数，该函数使用其参数调用所需的函数。替换以下内容可以解决您的问题：

document.getElementById("gb-gbn-5").addEventListener("click",
    gbnFunc = function({text(RoyalAirForce[0],RoyalAirForce[1],RoyalAirForce[2])}
);

document.getElementById("fr-7").addEventListener("click",
    frFunc = function(){text(France[0],France[1],France[2])}
);

多个eventListener和innerHTML数据文本不能正常工作？

1 个答案: