15 Uncaught TypeError: Cannot set properties of null (setting ‘onclick‘)
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>
15 Uncaught TypeError: Cannot set properties of null (setting ‘onclick‘)的更多相关文章
- Vue 报错Error in render: “TypeError: Cannot read properties of null (reading ‘xxx’)” found in
前端vue报错 [Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'name' ...
- vue报错 Uncaught TypeError: Cannot read property of null
有可能是点击a标签,但是a标签有click事件,未阻止默认事件导致报错,开始都看不出来是什么错误
- Vue报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol')
Vue报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol') 报错信 ...
- Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null
在开发Ext 项目中如果遇到 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null 这个错误,检查下renderT ...
- Uncaught TypeError: Cannot set property 'innerHTML' of null
学习Chrome插件时,要在弹出页面中显示当前时间,结果怎样也显示不出来 看了 http://www.cnblogs.com/mfryf/p/3701801.html 这篇文章后感悟颇深 通过调试发现 ...
- Three.js three.js Uncaught TypeError: Cannot read property 'getExtension' of null
在调试Three.js执行加载幕布的时候,突然爆出这个错误three.js Uncaught TypeError: Cannot read property 'getExtension' of nul ...
- JavaScript Uncaught TypeError: Cannot read property 'value' of null
用 JavaScript 操作 DOM 时出现如下错误: Uncaught TypeError: Cannot set property 'value' of null Uncaught TypeEr ...
- 前台报错:Uncaught TypeError: Cannot read property '0' of null
错误现象: var div1=mycss[0].style.backgroundColor; //这一行提示360和chrome提示:Uncaught TypeError: Cannot read ...
- 解决sweetalert 无故报错 elem.className.replace Uncaught TypeError: Cannot read property 'className' of null
今天碰到这么一个问题,在使用sweetalert的时候时有时无会报错 elem.className.replace Uncaught TypeError: Cannot read property ' ...
随机推荐
- [算法1-排序]（.NET源码学习）& LINQ & Lambda
[算法1-排序](.NET源码学习)& LINQ & Lambda 说起排序算法,在日常实际开发中我们基本不在意这些事情,有API不用不是没事找事嘛.但必要的基础还是需要了解掌握. 排 ...
- http、https和Cookie
http和https http,https 都是网络传输协议 是用于网络相关传输,http走的是明文传输,https走的密文传输(内部采用对称加密以及非对称加密).对应的https安全性要高于http ...
- Apache DolphinScheduler 2.0.1 来了，备受期待的一键升级、插件化终于实现
✎ 编 者 按:好消息!Apache DolphinScheduler 2.0.1 版本正式发布! 本版本中,DolphinScheduler 经历了一场微内核+插件化的架构改进,70% 的代码被重构 ...
- Docker 01 概述
参考源 https://www.bilibili.com/video/BV1og4y1q7M4?spm_id_from=333.999.0.0 https://www.bilibili.com/vid ...
- java学习第一天.day01
Java的编译和运行机制 java文件编译成字节码文件后加载到java缓存中jvm Java的基本语法 1.Java语言严格区分大小写 2.一个Java源文件里可以定义多个Java类,但不能存在多个p ...
- JavaSciprt 笔记目录
JavaScript 基础知识(一):对象以及原型 JavaScript 基础知识(二):闭包 JavaScript 异步编程(一):认识异步编程 JavaScript 异步编程(二):Promise
- Java Stream 函数式接口外部实例的引用
Java Function Interface 函数式接口: Stream.empty() .filter(Predicate) .map(Function) .forEach(Consumer); ...
- CCF NOI Online 2021 提高组 T2 积木小赛 （子序列自动机+后缀自动机，O(n^2)）
题面 Alice 和 Bob 最近热衷于玩一个游戏--积木小赛. Alice 和 Bob 初始时各有 n 块积木从左至右排成一排,每块积木都被标上了一个英文小写字母. Alice 可以从自己的积木中丢 ...
- n【c#】委托：delegate 学习笔记
类似于c/c++的指针,只不过c#的委托存储的是某个方法的调用,派生子System.Delegate
- 实时降噪（Real-time Denoising）：Spatio-Temporal Filtering
目录 空间滤波(Spatial Filtering) 基于距离的高斯滤波 双边滤波(Bilateral filtering) 联合双边滤波(Joint Bilateral filtering)[201 ...