15 Uncaught TypeError: Cannot set properties of null (setting ‘onclick‘)
2024-10-21 05:00:17
1、报错的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css"> </style>
<script type="text/javascript">
//获取button对象
var btn = document.getElementById("btn");
//为按钮的对应事件绑定处理函数的形式来响应事件，当事件被触发时，对应的函数将会被调用
btn.onclick = function () {
alert("触发了点击事件");
};
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function () {
document.getElementById("t2").value = document.getElementById("t1").value
};
btn2.onclick = function () {
document.getElementById("t2").value = ""
}
</script>
</head>
<body>
<button id="btn">我是按钮</button>
<br><br>
<input id="t1" type="text" value="文本1">
<input id="t2" type="text">
<button id="btn1">copy</button>
<button id="btn2">取消</button>
</body>
</html>
2：报错的原因
文档的加载过程是自上向下加载。使用未命名的变量、会报错
3、解决办法
1、将Javascript代码从<head>标签中放入<body>中
2、如果非要将该段代码放入到head标签中该怎样做？？？
修改后的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css"> </style>
<script type="text/javascript">
window.onload = function(){
//获取button对象
var btn = document.getElementById("btn");
//为按钮的对应事件绑定处理函数的形式来响应事件，当事件被触发时，对应的函数将会被调用
btn.onclick = function () {
alert("触发了点击事件");
};
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function () {
document.getElementById("t2").value = document.getElementById("t1").value
};
btn2.onclick = function () {
document.getElementById("t2").value = ""
}
}
</script>
</head>
<body>
<button id="btn">我是按钮</button>
<br><br>
<input id="t1" type="text" value="文本1">
<input id="t2" type="text">
<button id="btn1">copy</button>
<button id="btn2">取消</button>
</body>
</html>
最新文章
- android studio 换护眼的颜色步骤
- RAID磁盘阵列笔记
- iOS-数据解析XML解析的多种平台介绍
- 20145337《Java程序设计》第三周学习总结
- ASP.NET MVC API 路由生成规则
- 从invoke简单理解反射
- Tengine安装配置
- iOS6定位服务编程详解
- Codeigniter夸应用调用model
- x264_param_t结构
- 常用js函数
- OpenStack入门之初步认识
- Xshell 使用技巧
- TensorFlow之DNN（二）：全连接神经网络的加速技巧(Xavier初始化、Adam、Batch Norm、学习率衰减与梯度截断)
- Simple 杂题练手记
- 剑指offer——python【第14题】链表中倒数第k个节点
- 【网络】TCP和UDP的区别以及TCP的三次握手四次释放
- 阿里云RDS备份在本地mysql快速还原
- 清华操作系统实验--80x86汇编基础
- android studio中使用git版本管理