CODEWITHSUNDEEP
javascriptjqueryhtml
Archit Arora
Archit Arora

Reputation: 2626

Call same onClick function for different buttons on the same HTML page

I am new to JavaScript so forgive me if my question sounds stupid. I have various icons(the same icon repeated again and again) on my page represented by 

<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">

Now, I want to call a javascript function that opens a popup window when I click on any of these icons -

// 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";
    }
}

Now, because I am trying to get the element by ID, only one of the icon results in a modal when clicked while the function is not called (Obviously) when I click on others.

I want the same function to be called if I click on any of the icons.

How do I achieve this? Please find my code here - https://jsfiddle.net/up5bd22s/1/

Thanks in advance!

Upvotes: 0

Views: 2108

Answers (2)

Alexander Nied
Alexander Nied

Reputation: 13623

You can't use multiple identical ids on different elements -- it is invalid HTML. An id is meant to be unique -- much like a social security number is a form of unique id.

I think you want to get the collection of elements, then iterate over them to update their onclick. I'd recommend refactoring something like this

// 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();
    }
}

(This is, of course, after updating the repeated ids into classes.)

Upvotes: 0

Vineesh
Vineesh

Reputation: 3782

You can use class attribute instead of id and add event listeners to all elements matching that class as below.

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);
}

Upvotes: 3

Related Questions