javascript - appendchild报错-PHP中文网问答

var waterfall = {

    testdata:[],
    ulArr:document.querySelector('ul'),

    randomdata:function (userlength,maxNumber) {
        var data = parseInt(Math.random()*maxNumber);
        if(waterfall.testdata.length < userlength){
            waterfall.testdata.push(data);
            waterfall.randomdata(userlength,maxNumber)
        }else {
            return false;
        }
    },

    createImg:function (count) {
        for(var i = 0; i < count.length; i++){
            var img = document.createElement('img');
            img.src = 'girl/' + count[i] + '.jpg';
            var li = document.createElement('li');
            li.appendChild(img);
            //假设一个最短的ul
            var minHeightUl = waterfall.ulArr[0];
            //循环找到每次最短的然后添加图片
            for (var j = 0; j < waterfall.ulArr.length; i++) {
                if(minHeightUl.offsetHeight > waterfall.ulArr[j].offsetHeight) {
                    minHeightUl = waterfall.ulArr[j];
                }
            }
            minHeightUl.appendChild(li);
        }
    }

};

window.onload = function () {
    waterfall.randomdata(50,16);
    document.write(waterfall.testdata);
    waterfall.createImg(waterfall.testdata);
}

如上所示，写了一个瀑布流的函数，但在执行的时候，chrome显示：

怎么修复这个问题呢？

全部回复(3)

大家讲道理2017-04-11 11:33:13 3楼

你的代码里有两处问题：

ulArr:document.querySelector('ul'),按照你的代码，你应该是为了选择所有的ul，所以应该用querySelectorAll
var j = 0; j < waterfall.ulArr.length; i++, i++是什么鬼？

改了这两处应该就好了

赞 +0

添加回复

阿神2017-04-11 11:33:13 2楼

你的代码中出现了两个 appendChild，麻烦把172的代码给一下。
初步判断是

 var minHeightUl = waterfall.ulArr[0];

waterfall.ulArr的长度为0，所以第1个元素是undefined，如果是

 var li = document.createElement('li');
            li.appendChild(img);

li不可能是undefined，所以，麻烦你检查下 waterfall.ulArr

伊谢尔伦2017-04-11 11:33:13 1楼

var li = document.createElement('li');先要把li标签append到文档中，再进行操作