关于javascript中的循环+点击事件

制作了一个页面，其中有一些文本标签，希望每点击一次其标签前的数字框中的数字可以增加一，但是具体用的时候一直报错。请教大家为什么会这样以及如何解决？感激不尽！

标签对应的代码如下：

<div id="main">
        <div class="box">
            <ul>
                <li>
                    <span class="times">639</span>
                    <a href="#1">全职动画特别篇第一集讨论集中贴</a>
                    <p>讨论到这来，请不要撕起来，撕撕开删楼小黑屋。请理智讨论！请理智讨论！请理智讨论…</p>
                </li>
            </ul>
        </div>
        <div class="box">
            <ul>
                <li>
                    <span class="times">213</span>
                    <a href="#2">全职高手同人剧之《给所有知道我名字的人》</a>
                    <p>当他们放下了鼠标键盘和梦想，最终淹没在茫茫人海的平凡中，心中却仍有着永不能忘却的荣耀。即便荣耀走向终结，梦与记忆也永不褪色。看人生匆匆，愿我们同享光荣，愿我们的梦永不落空。全职高手同人《给所有知道我名字的人》…</p>
                </li>
            </ul>
        </div>
        <div class="box">
            <ul>
                <li>
                    <span class="times">209</span>
                    <a href="#3">当千机伞实体化</a>
                    <p>Stage 1.…</p>
                </li>
            </ul>
        </div>
        <div class="box">
            <ul>
                <li>
                    <span class="times">190</span>
                    <a href="#4">第一千七百二十五章 荣耀不是一个人的游戏</a>
                    <p>强攻！沐雨澄风的地图炮打出的时候，孙翔没有闪避，和周泽楷、江波涛做出的反应…</p>
                </li>
            </ul>
        </div>
        <div class="box">
            <ul>
                <li>
                    <span class="times">166</span>
                    <a href="#5">＃论连黄少天监考官为何辞职＃</a>
                    <p>独白体+电话占大多字数.全员欢乐向.就一句话nn 黄少卖萌【没…</p>
                </li>
            </ul>
        </div>
        <div class="box">
            <ul>
                <li>
                    <span class="times">153</span>
                    <a href="#6">试试别的画风，涂一张毁人不倦</a>
                    <p>很喜欢水墨风啊 于是换了这个画风试试看 私设出没注意…</p>
                </li>
            </ul>
        </div>

以下是js部分的代码

<script type="text/javascript">
    var box=document.getElementsByClassName("box");
    var times=document.getElementsByClassName("times");
    for(var i=0;i<box.length;i++){
        box[i].onclick=function(){
            times[i].innerHTML=parseInt(times[i].innerHTML)+1;
        }
    }
</script>

你这种写法是有问题的
如果要用JS，在class="box" 加上 onclick="方法名(第N个)"，
JS：function 方法名(n) {
v = times[n].innerHTML;
times[n].innerHTML = v;
}
用JQ会更简单一些

因为你需要在事件内使用事件外的循环变量i。
当事件触发时，那个循环早就结束了，那时的i的值已经是循环最大值加1了。
所以需要用一些方式保存住当前循环的i的值。

方案一：用闭包保存住当前循环的i的值

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

方案二：用let块作用域变量

for (var i = 0; i < arr.length; i++) {
    let k = i;
    arr[i].onclick = function () {
        alert(k);
    }
}

方案三：为事件元素设置一个index属性，在事件函数内通过this获取当前对象并访问index属性。

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

兄弟，你犯的是闭包的问题，div和span标签的事件绑定都绑在box[6]和times[6]上面了（然而根本不存在times[6]和box[6]），所以会报错，最简单的解决办法是把for循环里的var改成let.

<script type="text/javascript">
    var box=document.getElementsByClassName("box");
    var times=document.getElementsByClassName("times");
    for(let i=0;i<box.length;i++){
        box[i].onclick=function(){
            times[i].innerHTML=parseInt(times[i].innerHTML)+1;
        }
    }
</script>