国をクリックするたびに、codepen（最後）のjsコードに表示されるものからsvgパスを使用してインタラクティブマップを作成しようとしています。モーダルで軍隊、年、国の名前を表示したい名前、今まで私は英国とフランスにeventListener-click-を追加しました
したがって、それらの1つをクリックすると、eventListenerは関数テキストを呼び出します。この関数テキストは、コード内の配列から引数を取得し、innerHtmlで3つのgetElementByIdを含む関数のパラメーターに渡します。
問題は、フランスのeventListenerの1つだけが、ページの中央に表示されて機能するモーダルでテキストデータを渡すことですが、英国の1つが開始するjsファイルでそのevetListenerを削除すると、奇妙なことになります。ページをリロードした後、作業してテキストデータを渡します。
Pleseは私のcodepen（最後に）を見て、JavaScriptでIDにeventListeners（クリック）がある両方の国をクリックしますが、jsの最後のeventListener（フランス）のテキストのみが機能します。
つまり、重要な点は、国をクリックして、さまざまな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;
}
ページのどこかをクリックするとモーダルが表示されることを忘れましたが、国を変えると同じ情報が表示されます。
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])}
);
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加