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 () {

        //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");

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

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

          var liTop = [i] * 10;

          var liLeft = [i] * 10;

          ul.appendChild(nodeLi);

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

        }

      }