按钮点击后JS访问元素index值失效问题：为什么循环中分配的index值在按钮点击事件中失效？

<input type="button" value="a">
<input type="button" value="b">
<input type="button" value="c">
<input type="button" value="d">
<input type="button" value="e">
<input type="button" value="f">

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

<script>
    var oinput = document.getelementsbytagname("input");
    var oli = document.getelementsbytagname("li");

    for (var i = 0; i < oinput.length; i++) {
        oinput[i].index = i;
        oinput[i].onclick = function() {
            for (var j = 0; j < oli.length; j++) {
                console.log(i); // 输出为6
                oli[j].style.display = "block";
            }
            console.log(i); // 输出为6
            oli[this.index].style.display = "none";
        }
    }
</script>

for (var i = 0; i < oinput.length; i++) {
    oinput[i].index = i;
    oinput[i].onclick = function() {
        ...
    }
}

for (var i = 0; i < oInput.length; i++) {
    (function(index) {
        oInput[i].onclick = function() {
            ...
            oLi[index].style.display = "none";
            ...
        }
    })(i);
}