I am trying to create an interactive map with svg paths from what you can see in my codepen(at the end) js code every time I am clicking a country I would like to display in a modal the name of their force, year and country name, until now I added to UK and France an eventListener -click-
So when I am clicking one of them the eventListener call the function text which should take the arguments from an array which is in my code and pass it to the parameters of the function which contain 3 getElementById with the innerHtml.
The problem is that only the one of France eventListener pass the text data in the modal which appear at the center of the page and work but the strange thing if I will remove the evetListener of it in the js file the one of the UK start to work and pass the text data after i reload the page.
Plese have a look on my codepen(at the end) click on both countries which their Id's have eventListeners(click) in javascript but only the text of the last eventListener(France) in js will work.
So the main point is that I would like to click the countries and display different informations about them by creating different eventListeners, maybe is wrong to do it like this but I am very new to js and untill now I cannot go deeper maybe.
codepen For a first look my js code here:
//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;
}
I forgot to tell that the modal will appear if you click anywhere on the page but will have the same informations I want to have different when I click different countries.
Vanilla Javascript does handle arguments being passed into eventListener call functions. Basically the event listeners for GB/FR were never being called, only the btn.onclick to display the modal was being called. A work around is to define a new variable / function which calls the function you want with its parameters. Replacing the following fixes your problem:
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])}
);