JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="myList">
        <li>1 item</li>
        <li>2 item</li>
        <li>3 item</li>
        <li>4 item</li>
    </ul>

    <ul id="myListClosure">
        <li>1 item</li>
        <li>2 item</li>
        <li>3 item</li>
        <li>4 item</li>
    </ul>

JavaScript

function addLinks () {
    var oList = document.getElementById('myList');
    var aListItems = oList.getElementsByTagName('li');
    for(var i = 0; i < aListItems.length; i++) {
        var oListItem = aListItems[i];
        // Here I try to use the variable i in a closure:
        oListItem.onclick = function() {
            alert(i);
        }
    }
}



function addLinksClosure () {
var oList = document.getElementById('myListClosure');
    var aListItems = oList.getElementsByTagName('li');
    for(var i = 0; i < aListItems.length; i++) {
        var oListItem = aListItems[i];
        // Watch this:
        oListItem.onclick = (function(value) {
            return function() {
                alert(value);
            }
        })(i);
    }
}
addLinks();
addLinksClosure();