appendchild报错


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显示:

怎么修复这个问题呢?


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

 var minHeightUl = waterfall.ulArr[0];

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

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

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


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


你的代码里有两处问题:

  • ulArr:document.querySelector('ul'),按照你的代码,你应该是为了选择所有的ul,所以应该用querySelectorAll

  • var j = 0; j < waterfall.ulArr.length; i++, i++是什么鬼?

改了这两处应该就好了



相关阅读:
nginx中,proxy_pass和rewrite执行顺序
js如何定义点击事件,弹出一个提醒事件后,2s消失,时间从点击按钮开始
如何修改URL地址中参数的值?
关于ES5中构造函数的问题
electron打包问题,多出来的那个窗口是什么鬼?有解决的吗?
linux下如何用C语言读取大于10G的文件?
afsdfsdfsdfsdfsdfsdf
idea debugmaven install 项目启动出现异常,求解决?
如何使用一次性定时器模拟周期性定时器?
echart 环形图悬浮如何不显示高亮效果
学习前端具体到了什么阶段可以去工作了呢?
为什么七牛上传图片会报错
关于过载动画的问题
gulp配合node运行程序时两个浏览器联动
element ui 的datePicker 日期控件怎么获取到鼠标选中的时间?
为什么t会出现4 和-1
vue 2.0全局服务端渲染的server-bundle问题
sequelize查询语句时转成的MYSQL语句中表名并不是自己定义的?
atom 函數環境
dubbo配置问题 Duplicate spring bean id 求帮助



快速导航

Copyright © 2016 phpStudy |