Adding 'click' event listener using 'for' loop
<p>HTML:</p>

<pre><code>&lt;li&gt;Facebook&lt;/li&gt;
&lt;li&gt;Twitter&lt;/li&gt;
&lt;li&gt;Souncloud&lt;/li&gt;
</code></pre>

<p>JS:</p>

<pre><code>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&lt;listElement.length;i++) {
        listElement[i].addEventListener('click',openURL(links[i]))
    }

}
</code></pre>

<p>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 <code>&lt;a&gt;</code> tag.</p>

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

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

<p>Any help would be appreciated, thanks!</p>