Cannot read properties of null (reading '0')另一个基本上一模一样的就不报错为什么呢？

Question

Cannot read properties of null (reading '0')另一个基本上一模一样的就不报错为什么呢？

发布于
2022-08-29 天津

<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-3.6.0.min.js" ></script>
<script>
    $(function(){
            let username=null;
            let word=null;
            let httpurl=null;
        $(".kaiguan").click(function(){
            if($(".shiying").height()==0)
            {$(".shiying").height("145px")}
            if($(".shiying").height()==145)
            {$(".shiying").height("0px")}
        })
        $.ajax({
                type:"get",
                url:"new_file.json",
                success:function(data){
                    username=data.username;
                    word=data.word;
                    httpurl=data.httpurl;
                }
            });
        let model=$(".u").detach();
        for(let i=0;i<12;i++){
            let newnode=model.clone(true);
            newnode.children().eq(0).children().eq(1).attr("src",httpurl[i]);
            newnode.children().eq(1).children().eq(0).text(username[i]);
            newnode.children().eq(1).children().eq(2).text(word[i]);
            $(".indexz").before(newnode);
        }
    })
    function g(){
            $(document).ready(function(){
                if($(window).width()>900){$(".shiying").height("0px")}
            })
        }
        setInterval("g()",3000);
</script>
<body>
    <header>
        <div id="nav">
                <a href="#" class="logo"><img src="img/header-logo.svg" width="162px" height="42px"></a>
            <ul class="head1">
                <li><a href="#">首页</a></li>
                <li><a href="#">IT技术</a></li>
                <li><a href="#">推送</a></li>
                <li><input type="text" class="search" placeholder="搜索"><div class="iconfont iconfont1"><span>&#xe60c;</span></div></li>
            </ul>
            <button class="kaiguan">
            </button>
            <div class="write1 iconfont"><a href="#" class="xie">&#xe61b;写文章</a></div>
            <div class="denglu"><a href="#">登录</a></div>
            <ul class="shiying">
                <li><a href="#">首页</a></li>
                <li><a href="#">IT技术</a></li>
                <li><a href="#">推送</a></li>
            </ul>
        </div>
    </header>
    <ul class="userall">
        <li class="u">
            <div style="float: left;">
                <a href="#">
                <img src="img/headimg1.jpg" class="aside_user">
                </a>
            </div>
            <div style="float:left;padding-left: 10px;margin-top: 5px;">
                <div style="float: left;font-size: 14px;">Ben</div>
                <br />
                <div style="float: left;font-size: 12px;color: #969696;margin-top: 3px;">写了4212k字·12.13k喜欢</div>
            </div>
            <span class="guanzhu"><a href="#">关注</a></span>
        </li>
        <li class="indexz"></li>
    </ul>
</body>

</html>

.json
{

"word":["写了4212k字·12.13k喜欢",
    "写了4212k字·12.13k喜欢",
    "写了42k字·2.13k喜欢",
    "写了422k字·2.13k喜欢",
    "写了4212k字·12.13k喜欢",
    "写了42k字·12.3k喜欢",
    "写了422k字·12.13k喜欢",
    "写了122k字·12.13k喜欢",
    "写了12k字·12.3k喜欢",
    "写了12k字·2.1k喜欢",
    "写了22k字·12.1k喜欢",
    "写了32k字·12.13k喜欢"],
"username":["马路边边","大神","Ben","lili","AMY","飞侠","Luck","GoGo","TONY","BOBO","汉堡","LiLei"],

    
"httpurl":[    "img/headimg1.jpg",
            "img/headimg2.png",
            "img/headimg3.png",
            "img/headimg4.png",
            "img/headimg5.png",
            "img/headimg6.png",
            "img/headimg7.png",
            "img/headimg8.png",
            "img/headimg9.png",
            "img/headimg10.png",
            "img/headimg11.png",
            "img/headimg12.png"
            ]

}

javascript

阅读 1.8k

1 个回答

得票最新

hfhan

29k72241

发布于
2022-08-29 安徽

✓ 已被采纳

ajax是异步，所以for循环会先于ajax的success执行，此时username、httpurl这些全是null，所以报错了

异步中的数据一般使用回调函数去处理

撰写回答