for循环只有最后一个结果

Question

window.onload = function() {

    //var boxWidth = document.getElementById("pic_box").offsetWidth;

    //var boxHeight = document.getElementById("pic_box").offsetHeight;

    var picBox = document.getElementById("pic_box");

    var ul = document.getElementById("pic_box_ul");

    var nodeLi = document.createElement("li");

    for (i=0;i<=100;i++){

        liTop = [i]*10;

        liLeft = [i]*10;

        ul.appendChild(nodeLi);

        nodeLi.setAttribute("style","top:"+liTop+"px;height:"+liLeft+"px");

    }

}

不是应该输出100个li吗？怎么只有一个呢

自己想了一下是不是每一次for都覆盖了上一次的结果，所以只有一个，那要怎么处理才不会覆盖呢

Answer 1

这个代码很有问题啊，先不说能不能跑得通，先是变量定义问题：i也没定义，liTop，liLeft也没定义；另外没有100个li标签的原因也是没理解循环的含义，应该把createElement("li")放到for循环里window.onload = function () {&nbsp; &nbsp; &nbsp; &nbsp; //var boxWidth = document.getElementById("pic_box").offsetWidth;&nbsp; &nbsp; &nbsp; &nbsp; //var boxHeight = document.getElementById("pic_box").offsetHeight;&nbsp; &nbsp; &nbsp; &nbsp; var picBox = document.getElementById("pic_box");&nbsp; &nbsp; &nbsp; &nbsp; var ul = document.getElementById("pic_box_ul");&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i <= 100; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var nodeLi = document.createElement("li");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var liTop = [i] * 10;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var liLeft = [i] * 10;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ul.appendChild(nodeLi);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nodeLi.setAttribute("style", "top:" + liTop + "px;height:" + liLeft + "px");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }