Clicking on a link to display images

Question

I'm new to programming and working on a website that displays a list of links. Clicking on a specific link, displays some images. Now I'm wondering if I need to add an event listener to each link because what if I have a 100 links, does that mean I'll have to write 100 event listeners?

document.getElementById("monkwhosold").addEventListener("click",function() {disp_img(/MonkWhoSold)}); 

The above event listener is an example, where a user clicks one of the links and a disp_img function is called with the img folder path passed as a parameter.

Answer 1

There are many ways to solve this. Here's one.

<a href="#" class="image-link" data-url="/MonkWhoSold">
<a href="#" class="image-link" data-url="/AnotherImage">
...

Then in JavaScript you can write:

// find all <a> tags with class of 'image-link'
var links = document.querySelectorAll('a.image-link');

// loop through them all
for (var i = 0; i < links.length; i++)
{
    var link = links[i];
    // listen for the click event
    link.addEventListener('click', function()
    {
        // on click, show the image using the URL from the data-url attribute
        disp_img(link.data.url);
    });
}

This doesn't use any jQuery. If you're starting out programming these days, I think it's worth learning the DOM stuff directly. Once upon a time this wasn't easy or didn't work across browsers, and jQuery was really valuable. That's less true nowadays, though it still can be quite convenient.

In this code there are only three functions you really need to learn:

• querySelectorAll to find all elements that match some CSS selector
• addEventListener to attach a callback function to a particular event
• element.data to access data stored in data-foo="bar" attributes of the HTML

Other than that it's for , function and other simple elements of the language.

Answer 2

First of all I recommend to you to use something like jQuery for many reasons.

Suppose you have a series of images in this way:

<div id="myLinks">
   <a href="...">link1</a>
   <a href="...">link2</a>
   ...
</div>

Using

$('#myLinks a').on('click', function() {disp_img($(this).attr("href"))});

It's like the code you've wrote using the plain Javascript. But, like the yours, in this way you're creating an handler for each image (very slow).

But I recommend to use this one:

$('#myLinks').on('click', 'a', function() {disp_img($(this).attr("href"))});

Because in this way you're using only one listener for all the links. That is more performant!

Answer 3

If you have many links, acquire the elements by class.

JavaScript:

document.getElementsByClassName("imageLink").addEventListener("click", function () { 
      //do something
});

JQuery

$('.imageLink').on('click', function () {
      //do something
});

That way you have one function, not one function per link.