Mihir Chaturvedi Mihir Chaturvedi - 1 month ago 8
HTML Question

Adding 'click' event listener using 'for' loop

HTML:

<li>Facebook</li>
<li>Twitter</li>
<li>Souncloud</li>


JS:

var links = ['https://www.facebook.com/', 'https://twitter.com', 'https://soundcloud.com'];

function openURL (url) {
location.href = url;
}

window.onload = function () {

var listElement = document.getElementsByTagName('li');

for (i=0;i<listElement.length;i++) {
listElement[i].addEventListener('click',openURL(links[i]))
}

}


I want the code to work in such a way that when the user clicks either of the list elements, it opens up the respective website. For certain reasons I do NOT want to use the
<a>
tag.

The logic to the code is very simple. First, a variable is created which returns an array of all the
<li>
tags in the document. Then using the 'for' loop, I set an event listener to each of the
<li>
tags in the array. The function I run simply opens the website.

Somehow, whenever I open the page, it gets redirected automatically, without clicking, to facebook.com. Why does this happen??

Any help would be appreciated, thanks!

Answer

This is because your event handler will be called later (by user action), and that time, i isn't what you want. You have to use closure to keep it internal.

var links = ['https://www.facebook.com/', 'https://twitter.com', 'https://soundcloud.com'];

function openURL(link) {
  console.log(link);
};


window.onload = function () {

    var listElement = document.getElementsByTagName('li');

    for (i=0;i<listElement.length;i++) {
        listElement[i].addEventListener('click',(function (i) {
          return function () {
            openURL(links[i]);
          };
        }(i)));
    }

}
<li>Facebook</li>
<li>Twitter</li>
<li>Souncloud</li>

Comments