Adding 'click' event listener using 'for' loop

Question

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!

score 6 · Accepted Answer · answered Oct 26 '16 at 13:15

6

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>

answered Oct 26 '16 at 13:15

dashtinejad

6,193
4
28
44

Thanks for the help! Could you explain to me what the `(i)` in the third last line of the code is for? I can't understand the use... – Mihir Chaturvedi Oct 26 '16 at 13:33
@MihirChaturvedi In [this question](http://stackoverflow.com/q/750486/3971911), you can find complete explanation. – dashtinejad Oct 26 '16 at 13:38

score 3 · Answer 2 · answered Oct 26 '16 at 13:19

When you do click',openURL(links[i]), it will call openUrl. You should use .bind(context, params). Also note, first argument of eventListener is event

Also, window.onload = function is considered as bad practice as it will override any previous listener. You should use .addEventListener

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

function openURL(event, url) {
  //location.href = url;
  console.log(url)
}

window.addEventListener('load', function() {
  var listElement = document.getElementsByTagName('li');
  for (i = 0; i < listElement.length; i++) {
    listElement[i].addEventListener('click', openURL.bind(null, event, links[i]))
  }
})

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

Adding 'click' event listener using 'for' loop

2 Answers2