(原创)JS点击事件——Uncaught TypeError: Cannot set property 'onclick' of null

html部分代码:

 

JS部分代码:

需要实现的效果:点击图片,来回相互切换。

我开始的错误做法:代码如上图所示(逻辑上看起来是没有错误的)

尝试过程:把JS代码放在</body>闭合标签之前运行是没有问题的,单独写在JS代码文件中,从head标签内引入JS文本,报错Uncaught TypeError: Cannot set property 'onclick' of null

最终解决方案:将JS代码放入window.onload = function(){.........}中,head标签内引入JS文本,便可以正确运行。O(∩_∩)O

第二种方法:如上文尝试过程中提到的,将JS代码写在</body>标签之前

总结:如果把js直接写在head标签之内或者写成单独JS文件从head标签引入,浏览器则先执行JS代码,后加载页面,因此报错Uncaught TypeError: Cannot set property 'onclick' of null.将JS代码写在</body>标签之前或者写在window.load = function(){....}中引入html页面,则先加载页面,后执行JS代码,代码则会正常运行。

转载于:https://www.cnblogs.com/hekai123/p/8991249.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/254678.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

事务传播机制/数据库异常解析——2016-8-13分享总结

一. 事务的传播机制&#xff0f;required 跟 required new 的使用与区别 基础回顾 1.1 事务的隔离级别&#xff1a; ISOLATION_READ_UNCOMMITTED&#xff08;读未提交&#xff09; ISOLATION_READ_COMMITTED&#xff08;读已提交&#xff09; ISOLATION_REPEATABLE_READ&#x…

20155307 2016-2017 《Java程序设计》第三次实验报告

&#xff08;一&#xff09;敏捷开发与XP 敏捷开发是一种以人为核心、迭代、循序渐进的开发方法。“敏捷流程”是一系列价值观和方法论的集合。从2001年开始&#xff0c;一些软件界的专家开始倡导“敏捷”的价值观和流程&#xff0c;他们肯定了流行做法的价值&#xff0c;但是强…

ElasticSearch创建、修改、获取、删除、索引Indice mapping和Index Template案例

为什么80%的码农都做不了架构师&#xff1f;>>> The best elasticsearch highlevel java rest api-----bboss ElasticSearch客户端框架bboss的ClientInterface 接口提供了创建/修改、获取、删除索引Indice和IndexTemplate的方法&#xff0c;本文举例说明其使用方法…

spring mvc注解@RequestMapping

1、url路径映射 基本功能 2、窄化请求映射 根路径子路径 注意setViewName的路径。 3、限制http请求方法 get和 post 如果是get 转载于:https://www.cnblogs.com/jway1101/p/5773923.html

老婆的驾照要下来了,形容下我此刻的心情

&#xfeff;&#xfeff; 老婆的驾照要下来了&#xff0c;形容下我此刻的心情&#xff1a; 路上遇到的女人&#xff0c;大部分是不用眼睛和脑子开车的&#xff0c;完全是凭自己的感觉开车。凡是看到前车奇慢、路口犹豫不决、不打灯缓慢变线、不该…

windows环境下OpenLDAP安装与客户端连接配置

2019独角兽企业重金招聘Python工程师标准>>> 1.下载安装OpenLDAP版本 C:\Users\Administrator>slapd -V OpenLDAP 2.4.42 Standalone LDAP Server (slapd) 2.安装过程中&#xff0c;全部用默认的操作执行即可。 3.修改OpenLDAP文件如下&#xff1a; # MDB Backen…

halcon标定后改变世界坐标系参考点方法

halcon相机标定完成后&#xff0c;世界坐标系原点在标定板的中间&#xff0c;如果要自定义坐标系原点该如何操作 如图&#xff1a; 方法1 使用仿射变换 *pose_to_hom_mat3d (FinalPose, HomMat3D) *hom_mat3d_translate_local (HomMat3D, dx, dy, 0, HomMat3DTranslate) *hom_…

KUKA---US2电源的安全属性-------老款硬线连接实现的DRIVE安全STO SBC 、新款基于Safety over EtherCAT 网络帧实现的DRIVE安全STO SBC

安全双回路的监控&#xff1a;&#xff08;工业上的安全&#xff0c;是指安全等级&#xff0c;没有绝对的安全&#xff09; 1. 机械式&#xff1a;监控关断继电器的辅助反馈触点&#xff0c;这个关断继电器包含机械联锁触点&#xff0c;这样反馈触点和主触点可以同步开关动…

X11硬线接口信号 与Profisafe安全输入输出信号之间的区别与比较

&#xfeff;&#xfeff;X11硬线接口信号 与Profisafe安全输入输出信号之间的区别与比较 Profisafe安全输入信号US2信号有待深入&#xff08;通过外部PLC &#xff1a;&#xff09; &#xfeff;&#xfeff;

var类型推断关键字

目录var 类型推断介绍var的一个例子&#xff1a;编程遵循规则var 类型推断介绍 使用var定义变量时&#xff0c;用var关键字替代实际类型。编译器可以根据变量的初始化值自行“推断”变量的类型。 例如&#xff1a; var A 0&#xff1b; 等价于 int A 0&#xff1b;var的一个…

斯坦福大学机器学习——高斯判别分析

转自 http://blog.csdn.net/linkin1005/article/details/39054023 同朴素贝叶斯一样&#xff0c;高斯判别分析&#xff08;Gaussian discriminant analysismodel, GDA&#xff09;也是一种生成学习算法&#xff0c;在该模型中&#xff0c;我们假设y给定的情况下&#xff0c;x服…

MapGIS转Shp文件的单位问题

MapGIS转Shp文件的单位问题 原文:MapGIS转Shp文件的单位问题在MapGIS浏览查看一下数据&#xff0c;各种不习惯&#xff1b;用mapgis自带的转shp功能&#xff0c;属性表会出错&#xff1b;利用名为map2shp的试用版软件可将mapgis格式的数据较为良好转成shp格式。但经常会遇到一个…

显示/隐藏Mac系统中所有的隐藏文件

显示&#xff1a; 在终端输入:defaults write com.apple.finder AppleShowAllFiles YES隐藏: 在终端输入:defaults write com.apple.finder AppleShowAllFiles NO然后重启Finder即可(先点击左上角的苹果图标&#xff0c;再选强制退出&#xff0c;然后选中Finder&#xff0c;点击…

机械零点、MAM 文件 、 EMT标定原理

&#xfeff;&#xfeff; 机械零点、MAM 文件、EMT标定原理。 可调节的机械零点&#xff0c;不需要MAM文件&#xff0c;使之成为90度。 不可调节的机械零点&#xff0c;需要MAM文件修正&#xff0c;使之成为90度。 带负载的偏移补偿、带负载的偏移补偿mastering。做过带负…

智慧城市的互联网大脑架构图:大社交网络与智慧城市结合是关键

从本质上讲智慧地球和智慧城市还是互联网发展到一定程度&#xff0c;向城市建设蔓延和深入的结果。因此建设智慧城市就不能不忽略互联网的发展趋势和进化规律。 而越来越多的迹象表明“互联网正在向着与人类大脑高度相似的方向进化&#xff0c;它将具备自己的视觉、听觉、触觉、…

20145227鄢曼君《网络对抗》Web安全基础实践

20145227鄢曼君《网络对抗》Web安全基础实践 实验后回答问题 1.SQL注入攻击原理&#xff0c;如何防御&#xff1f; SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序&#xff0c;而这些输入大都是SQL语法里的一些组合&#xff0c;通过执行SQL语句进而执行攻击者所要…

[转]Xvid参数详解

众所周知&#xff0c;Mencoder以其极高的压缩速率和不错的画质赢得了很多朋友的认同&#xff01; 原来用Mencoder压缩Xvid的AVI都是使用Xvid编码器的默认设置&#xff0c;现在我来给大家冲冲电&#xff0c;讲解一下怎样使用Mencoder命令行高级参数制作Xvid编码格式AVI影片。经…

关于box-shadow属性的一点心得

一般我用到box-shadow都是用于诸如按钮&#xff0c;文本块&#xff0c;某些图标&#xff0c;css类似为: box-shadow: 1px 1px 5px rgba(0, 0, 0, .8);这样&#xff0c;样式看上去会更加柔和&#xff0c;或者增加了立体感。 我个人的理解上&#xff0c;box-shadow的本质就是本体…

javascript:正则表达式、一个表单验证的例子

阅读目录 本文内容&#xff1a;正则表达式&#xff1a;利用正则表达式进行表单验证的例子&#xff1a;回到顶部本文内容&#xff1a; 正则表达式正则表达式的使用方法正则表达式的特殊匹配字符正则表达式修饰符利用正则表达式进行表单验证的例子首发日期&#xff1a;2018-05-13…