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 ' ...
随机推荐
- 日均 6000+ 实例，TB 级数据流量，Apache DolphinScheduler 如何做联通医疗大数据平台的“顶梁柱”？
作者 | 胡泽康 鄞乐炜 作者简介 胡泽康 联通(广东)产业互联网公司 大数据工程师,专注于开源大数据领域,从事大数据平台研发工作 鄞乐炜 联通(广东)产业互联网公司 大数据工程师,主要从事大数据平 ...
- 金灿灿的季节 - Apache DolphinScheduler收获5位新Committer
在这个金灿灿的收获季节,经过 Apache DolphinScheduler PPMC 们的推荐和投票,Apache DolphinScheduler 收获了 5 位新Committer .他们是:n ...
- [java]基础学习HELLOWORLD系列
(一)手把手教你做JDK环境变量配置 步骤 1 : 首先看配置成功后的效果 点WIN键->运行(或者使用win+r) 输入cmd命令 输入java -version 注: -version是小写 ...
- 你言我语 By Twikoo
主要做了两件事: 一是前端魔改 二是首页调用(替代原 bber) 注明:以下样式.功能代码基于 Twikoo v1.6.4 前端魔改 "管理面板"按钮同步隐藏输入框.先到twiko ...
- 【面试题】如何去掉vue的url地址中的#号?及其原理？
如何去掉vue的url地址中的#号?及其原理? 点击打开视频讲解更加详细 如何去掉vue的url地址中的#号? import Vue from 'vue'; import VueRouter from ...
- Think PHP 完整的带富文本格式以及图片上传，并且在页面上分页展示
Think php6.0官网网址:序言 · ThinkPHP6.0完全开发手册 · 看云 (kancloud.cn) 下面是基础配置 第一步:创建TP框架,命名为tp composer create- ...
- Linux虚拟机快捷键大全
转发请注明原作者! 图形化命令框快捷键 Ctrl-Shift-t 创建标签页 Ctrl-Shift-w 关闭标签页 Ctrl-Shift-n 创建新窗口 Ctrl-Shift-q 关闭新窗口 Ctrl ...
- 04-MyBatisPlus条件构造器
一.wapper介绍 Wrapper : 条件构造抽象类,最顶端父类 AbstractWrapper : 用于查询条件封装,生成 sql 的 where 条件 QueryWrapper : Entit ...
- 03-MyBatisPlus的CRUD 接口
一.insert 1.插入操作 @RunWith(SpringRunner.class) @SpringBootTest public class CRUDTests { @Autowired pri ...
- Elasticsearch6.2服务器升配后的bug
.suofang img { max-width: 100% !important; height: auto !important } 本篇文章记录最近一次生产服务器硬件升级之后引起集群不稳定的现象 ...