HTML:

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

JS:

var links = ['/', '', ''];

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. Why does this happen??

Any help would be appreciated, thanks!

HTML:

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

JS:

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

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.. Why does this happen??

Any help would be appreciated, thanks!

• javascript
• html

2 Answers 2

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./', 'https://twitter.', 'https://soundcloud.'];

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>

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./', 'https://twitter.', 'https://soundcloud.'];

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>