同じHTMLページの異なるボタンに同じonClick機能を呼び出す

Question

JavaScriptには新しいので、私の質問がばかげている場合は私を許してください。 は、私はこれらのアイコンのいずれかをクリックするとポップアップウィンドウが開きますJavaScript関数を呼び出すようにしたい、今すぐ

<img src="/images/info_icon.gif" id="tooltip_icon" alt="hee haa"> 
<img src="/images/info_icon.gif" id="tooltip_icon" alt="hee haa"> 
<img src="/images/info_icon.gif" id="tooltip_icon" alt="hee haa"> 

で表さ私のページ上のさまざまなアイコンを（同じアイコンが再び繰り返さと）持っている -

// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the button that opens the modal 
var btn = document.getElementById("tooltip_icon"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 

IDで要素を取得しようとしているため、アイコンの1つのみがクリックされたときにモーダルになり、ほかの要素をクリックすると関数が呼び出されません（明らかに）。

いずれかのアイコンをクリックすると、同じ関数を呼び出す必要があります。

どうすればよいですか？ここに私のコードを見つけてください - https://jsfiddle.net/up5bd22s/1/

ありがとうございます！

Answer 1

あなたは別の要素に複数の同一id Sを使用することはできません - それは無効なHTMLです。 idは、ユニークであることを意味します.-社会保障番号が一意のIDの形式とほとんど同じです。

あなたは要素のコレクションを取得してから、それらを反復してonclickを更新したいと思います。私は（これはクラスに繰り返しid秒を更新した後、もちろん、である。）

この

// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the button that opens the modal 
var btn = document.getElementsByClassName(".tooltip_icon"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks the button, open the modal 
function displayModal() { 
    modal.style.display = "block"; 
} 

// When the user clicks on <span> (x), close the modal 
function hideModal() { 
    modal.style.display = "none"; 
} 

for (var i=0; i<btn.length; i++) { 
    btn[i].onclick = displayModal; 
} 

span.onclick = hideModal; 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     hideModal(); 
    } 
} 

ようなものをリファクタリングお勧めします

Answer 2

idの代わりにclass属性を使用し、それに一致するすべての要素にイベントリスナーを追加することができます。

https://jsfiddle.net/up5bd22s/2/

function showPopup(){ 
modal.style.display = "block"; 
} 

var btns = document.getElementsByClassName("tooltip_icon"); 


for (var i = 0; i < btns.length; i++) { 
    btns[i].addEventListener('click', showPopup, false); 
}