js遇到的Uncaught TypeError: Cannot set property 'onclick' of null at HTMLButtonElement.add.onclick错

最新推荐文章于 2021-10-19 17:16:54 发布

原创最新推荐文章于 2021-10-19 17:16:54 发布 · 5.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文探讨了JavaScript代码在HTML文档中的执行时机问题，并提供了两种解决方案：使用窗口加载事件或者将脚本放置于文档末尾。此外，还介绍了一个表格操作的例子，包括如何动态添加行及响应删除操作。

第一个是因为：js写在了body前面，写在了head前面，，这种有两种解决办法：第一：在<script></script>外面包裹一个入口函数：window.onload=function(){}

第二：把<script></script>放在body的最后

第二个是因为：定义了按钮空值

代码如下：

html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px ;
padding: 0px;
}
table{
border: 1px solid #000;
border-collapse: collapse;
}
td{
border: 1px solid #000;
height: 50px;
width: 200px;
text-align: center;
line-height: 50px;
box-sizing: border-box;

}
td:nth-of-type(4n){
color: red;
cursor: pointer;
}
</style>
</head>
<body>

姓名：<input type="text" id="name">
班级：<input type="text" id="banji">
<button id="add">新增</button>
<button id="delete">删除</button>

<table>
<tr id="hang">
<td>选择</td>
<td>姓名</td>
<td>班级</td>
<td>删除</td>
</tr>
</table>

<script src="作业.js"></script>
</body>
</html>