js代码Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML‘)问题解决

简介: js代码Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML‘)问题解决

在编写一个html时,想要实现js中处理的数据输出并显示在浏览器的表格中,然后再写完代码后,报错Uncaught TypeError: Cannot set properties of null (setting 'innerHTML');

1.png

Cannot set properties of null (setting 'innerHTML'),这个报错的意思是无法读取null的属性“innerHTML”,即表示找不到你想要将所写的HTML代码插入的地方。


原因:浏览器加载HTML文档时,会将HTML文档解析为一个树形结构,称为DOM树,代码的执行顺序是自上而下依次执行,当执行到innerHTML这一行代码时,他并没有加载到下面的DOM结构,就会报错无法读取HTML。


解决办法:将DOM的读取部分的script放在body后面。或者在script标签中添加window.onload,等页面加载结束后再执行这一部分代码。


示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    div{
      font-size: 14px;
      width: 200px;
      height: auto;
      margin: 50px auto; 
    }
    table{
      text-align: center;
      border-collapse:collapse;
    }
    table,tr,td,th{
      border: 1px solid #ccc;
    }
    #t1 tr:nth-child(even){
      color:red;
    }
    th{
      font-weight: bold;
    }
  </style>
<!--   将这部分放在body之后解决问题  -->
<!--  <script type="text/javascript">
    var stuNum = 7;
    var stuSoc = new Array();
    var sum = 0;
    var std = 0;
    var notPassNum = 0;
    for (var i = 0; i < stuNum; i++) {
      stuSoc[i] = prompt("请输入7个学生中第"+(i+1)+"个学生成绩分数:");
      sum += parseInt(stuSoc[i]);
      if (stuSoc[i] < 60) {
        notPassNum++;
      }
    }
    std = parseFloat(sum/stuNum).toFixed(3);
    alert("总分:"+sum+","+"平均成绩:"+std+","+"不及格人数:"+notPassNum);
    for (var i = 0; i < stuNum; i++) {
      document.getElementById(i).innerHTML = stuSoc[i];
    }
    document.getElementById("sum").innerHTML = sum;   
    document.getElementById("std").innerHTML = std;
    document.getElementById("notPassNum").innerHTML = notPassNum;
  </script> -->
</head>
<body>
  <div id = "content">
    <table id = "t1">
      <tr>
        <th>序号</th>
        <th>分数</th>
      </tr>
      <tr>
        <td>1</td>
        <td id = "0"></td>
      </tr>
      <tr>
        <td>2</td>
        <td id = "1"></td>
      </tr>
      <tr>
        <td>3</td>
        <td id = "2"></td>
      </tr>
      <tr>
        <td>4</td>
        <td id = "3"></td>
      </tr>
      <tr>
        <td>5</td>
        <td id = "4"></td>
      </tr>
      <tr>
        <td>6</td>
        <td id = "5"></td>
      </tr>
      <tr>
        <td>7</td>
        <td id = "6"></td>
      </tr>
    </table>
  </div>
  <hr>
  <div id ="result" >
    <table id = "t2">
      <tr>
        <th>统计项</th>
        <th>数值</th>
      </tr>
      <tr>
        <td>总分</td>
        <td id = "sum"></td>
      </tr>
      <tr>
        <td>平均成绩</td>
        <td id = "std"></td>
      </tr>
      <tr>
        <td>不及格人数</td>
        <td id = "notPassNum"></td>
      </tr>
    </table>
  </div>
    <script type="text/javascript">
    var stuNum = 7;
    var stuSoc = new Array();
    var sum = 0;
    var std = 0;
    var notPassNum = 0;
    for (var i = 0; i < stuNum; i++) {
      stuSoc[i] = prompt("请输入7个学生中第"+(i+1)+"个学生成绩分数:");
      sum += parseInt(stuSoc[i]);
      if (stuSoc[i] < 60) {
        notPassNum++;
      }
    }
    std = parseFloat(sum/stuNum).toFixed(3);
    alert("总分:"+sum+","+"平均成绩:"+std+","+"不及格人数:"+notPassNum);
    for (var i = 0; i < stuNum; i++) {
      document.getElementById(i).innerHTML = stuSoc[i];
    }
    document.getElementById("sum").innerHTML = sum;   
    document.getElementById("std").innerHTML = std;
    document.getElementById("notPassNum").innerHTML = notPassNum;
  </script>
</body>
</html>


结果:

1.png

目录
相关文章
|
4月前
|
JavaScript 前端开发 Java
除了 JavaScript,还有哪些编程语言支持 Set 类型
【10月更文挑战第30天】这些编程语言中的 `Set` 类型虽然在语法和具体实现细节上有所不同,但都提供了类似的集合操作功能,方便开发者在不同的编程场景中处理集合相关的数据和逻辑。
|
6月前
|
存储 JavaScript 前端开发
js的map和set |21
js的map和set |21
|
6月前
|
JavaScript 前端开发
JavaScript 中的新 Set 方法
JavaScript 中的新 Set 方法
44 1
|
7月前
|
API
【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)
【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)
|
7月前
|
JavaScript 前端开发
15 Uncaught TypeError: Cannot set properties of null (setting ‘onclick‘)
这篇文章解释了在HTML文档中因JavaScript代码在页面元素加载之前执行导致的"Cannot set properties of null (setting ‘onclick’)"错误,并提供了将JavaScript代码置于`<body>`标签内或使用`window.onload`事件确保DOM完全加载后再绑定事件处理器的解决办法。
15 Uncaught TypeError: Cannot set properties of null (setting ‘onclick‘)
|
7月前
|
JavaScript 前端开发 C++
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
|
8月前
|
存储 JavaScript 前端开发
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
80 1
|
8月前
|
JavaScript API 索引
JS【详解】Set 集合 (含 Set 集合和 Array 数组的区别,Set 的 API,Set 与 Array 的性能对比,Set 的应用场景)
JS【详解】Set 集合 (含 Set 集合和 Array 数组的区别,Set 的 API,Set 与 Array 的性能对比,Set 的应用场景)
149 0
|
8月前
|
存储
Cannot read properties of null (reading ‘msg‘)
Cannot read properties of null (reading ‘msg‘)

热门文章

最新文章