关于innerHTML切换div中图片的问题

「已注销」 2019-01-21 04:18:43

代码如下，运行后并没有将图片放到div中，而且控制台每秒会出一个错，如下图



<script>

        //获取容器

        var pics = document.getElementById("pics");

        var n = 1;

        //获取时钟控件

        setInterval(function () {

            if(n > 5) n = 1;

            pics.innerHTML="<img src='img/img"+n+".png' />";

            n++;

        },1000);

    </script>

    

</head>

<body>

<div class="wrapper">

    <div class="header">

        <div class="logo">编程小案例</div>

    </div>



    <div id="main">

        <div id="pics">

        </div>

    </div>

</div>

...全文

293 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

「已注销」 2019-01-22

打赏
举报

哈哈哈哈，犯了一个最low的错，这是在文档没有加载完就运行JS，自然会有错了。谢谢你们，让我对这个问题有了更深的理解。

天际的海浪 2019-01-21

打赏
举报

在全局环境下的代码是在页面加载阶段从上到下一边加载一边执行的，这时处于代码下面的页面元素还没有加载完，访问不到。要把script放在页面body下面，或者放到window.onload事件（页面加载完成后触发）中才可以

讨厌走开啦 2019-01-21

打赏
举报


        setInterval(function () {
            var pics = document.getElementById("pics");
            if(n > 5) n = 1;
            pics.innerHTML="<img src='img/img"+n+".png' />";
            n++;
        },1000);

改成这样不会报错。