innerHTML为null由于js&html加载顺序的坑

最新推荐文章于 2024-07-25 10:54:59 发布

Java天命人

最新推荐文章于 2024-07-25 10:54:59 发布

阅读量3.7k

点赞数 3

分类专栏：前端文章标签： innerhtml null innerHTML of null js 加载顺序

本文链接：https://blog.csdn.net/XiaHeShun/article/details/80246147

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天初学JavaScript和html，就直接踩坑了，很是郁闷，写一个乘法口诀表就写了一下午，纠结了一下午为什么innerHTML总是为空，后来算是解决了，原来就是js加载顺序的原因

**错误**html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/index.js"></script>
    </head>
    <body>
        <button >生成乘法口诀表</button>   
        <table id="table1" border="1" ">    
            <caption><h2>欢迎前来学习小学三年级乘法口诀表</h2></caption>    
        </table>        
    </body>
</html>

**错误**js代码

var strCode = "";
for (var i = 1; i<=9; i++) {
    strCode = strCode + "<tr>";
    for (var j = 1; j<=i; j++) {
        var temp = "<td>" + j + "*" + i + "=" + (i*j) + "</td>";
        strCode = strCode + temp;
    }
    strCode = strCode + "</tr>";
}
strCode = strCode + "";

console.log(strCode);

document.getElementById("table1").innerHTML+=strCode;

错误结果：

"Uncaught TypeError: Cannot read property 'innerHTML' of null"

错误原因：

详情注释在了图中↓↓↓。

最终正确的代码：

html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/index.js"></script>
    </head>
    <body>
        <button onclick="setTable()">生成乘法口诀表</button>   
        <table id="table1" border="1" style="display: none;">   
            <caption><h2>欢迎前来学习小学三年级乘法口诀表</h2></caption>    
        </table>        
    </body>
</html>

js代码：

var strCode = "";
for (var i = 1; i<=9; i++) {
    strCode = strCode + "<tr>";
    for (var j = 1; j<=i; j++) {
        var temp = "<td>" + j + "*" + i + "=" + (i*j) + "</td>";
        strCode = strCode + temp;
    }
    strCode = strCode + "</tr>";
}
strCode = strCode + "";

console.log(strCode);

var flag = true;

function setTable () {
    if(flag == true){
        flag = false;
        document.getElementById("table1").innerHTML+=strCode;
        document.getElementById("table1").style.display = "block";
    }

}

结果：

Java天命人

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
innerHTML为null由于js&html加载顺序的坑

今天初学JavaScript和html，就直接踩坑了，很是郁闷，写一个乘法口诀表就写了一下午，纠结了一下午为什么innerHTML总是为空，后来算是解决了，原来就是js加载顺序的原因**错误**html代码：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt;...
复制链接

扫一扫

专栏目录