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!

dashtinejad · Accepted Answer · 2016-10-26 13:15:52Z

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, 2016 at 13:15

dashtinejad

6,2734 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mihir Chaturvedi Over a year ago

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

dashtinejad Over a year ago

@MihirChaturvedi In this question, you can find complete explanation.

Rajesh Dixit · Accepted Answer · 2016-10-26 13:19:12Z

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>

Collectives™ on Stack Overflow

Adding 'click' event listener using 'for' loop

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related