【jQuery学习】用JavaScript写一个输出多选框的个数报错:Cannot set property 'onclick' of null"
说明：代码段来源于：《锋利的jQuery》
根据代码段我补充的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var btn=document.getElementById("btn");
btn.onclick=function(){
var arrays=new Array();
var items=document.getElementsByName("check");
for(i=0;i<items.length;i++){
if(items[i].checked){
arrays.push(items[i].value);
}
}
alert("选中的个数为"+arrays.length);
} </script>
</head>
<body>
<input type="checkbox" name="check" value="1" checked="checked"/>
<input type="checkbox" name="check" value="2" />
<input type="checkbox" name="check" value="3" checked="checked"/>
<input type="button" value="你选中的个数" id="btn" />
</body>
</html>
结果报错：
后来找到问题原因是因为：html文档是按顺序从上到下执行的，执行JavaScript时，还没加载到body里面的内容，所以会报错
如果希望内容不报错，可以在JavaScript里面对id是否存在进行判断：即存在id的时候执行代码段
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript"> var btn=document.getElementById("btn");
if(document.getElementById("btn")){
btn.onclick=function(){
var arrays=new Array();
var items=document.getElementsByName("check");
for(i=0;i<items.length;i++){
if(items[i].checked){
arrays.push(items[i].value);
}
}
alert("选中的个数为"+arrays.length);
}
} </script>
</head>
<body>
<input type="checkbox" name="check" value="1" checked="checked"/>
<input type="checkbox" name="check" value="2" />
<input type="checkbox" name="check" value="3" checked="checked"/>
<input type="button" value="你选中的个数" id="btn" /> </body>
</html>
但是，这样没有解决根本问题。将JavaScript代码调整到body内容后面就可以正常显示了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> </head>
<body>
<input type="checkbox" name="check" value="1" checked="checked"/>
<input type="checkbox" name="check" value="2" />
<input type="checkbox" name="check" value="3" checked="checked"/>
<input type="button" value="你选中的个数" id="btn" />
<script type="text/javascript">
var btn=document.getElementById("btn");
btn.onclick=function(){
var arrays=new Array();
var items=document.getElementsByName("check");
for(i=0;i<items.length;i++){
if(items[i].checked){
arrays.push(items[i].value);
}
}
alert("选中的个数为"+arrays.length);
} </script>
</body>
</html>
【jQuery学习】用JavaScript写一个输出多选框的个数报错:Cannot set property 'onclick' of null"的更多相关文章
- 怎么用JavaScript写一个区块链？
几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...
- go server框架学习之路 - 写一个自己的go框架
go server框架学习之路 - 写一个自己的go框架 用简单的代码实现一个go框架 代码地址: https://github.com/cw731/gcw 1 创建一个简单的框架 代码 packag ...
- JavaScript小例子：复选框全选
JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...
- js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false
用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...
- 输出复选框选中的文件名 checkbox
1. <tr> <td><input type="checkbox" name="cbxFileName"/> ...
- jquery easyui datagrid 空白条处理 自适应宽高 格式化函数formmater 初始化时会报错 cannot read property 'width'||'length' of null|undefined
1---表格定义好之后右侧可能会有一个空白条 这个空白条是留给滚动条的,当表格中的一页的数据在页面中不能全显示时会自动出现滚动条,网上有很多事要改源码才可以修改这个,但是当项目中多处用到时,有的需要滚 ...
- Python3+Selenium3+webdriver学习笔记8（单选、复选框、弹窗处理）
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...
- javascript : 写一个类似于 jquery css() 的方法
我们知道,jquery css() 方法可以很方便的更改DOM的样式. 但从原理上,这个并不复杂,我们完全可以自己写一个. 上代码. updateDOMStyle(DOM, obj){ Object. ...
- JavaScript写一个连连看的游戏
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...
随机推荐
- Luogu_4886 快递员
Luogu_4886 快递员 一道淀粉质的题目. 先考虑最简单的算法,那便是对每个点都求一边.时间复杂度O(NM) 然后如果我们把每个点的结果对应一个高度,我们会发现.最优解是在这个对应高度形成的三维 ...
- Selenium自动化测试之启动浏览器
Selenium自动化测试之启动浏览器 一.Eclipse新建java工程 1.新建java工程:File->New->Java Project,输入Project name:如AutoT ...
- 关于Oracle 数据库死锁 转
转自 https://zhidao.baidu.com/question/200422068111653165.html 一.数据库死锁的现象程序在执行的过程中,点击确定或保存按钮,程序没有响应,也没 ...
- c#的传输组件dotnetty
牛皮不多了,绩效吹起.... 最近一直看大家写的东西,了解的内容不少,我的牛皮也差不多吹完了.... 最后在说说最近测试的dotnetty.去年弄下来试了,不行,最近又弄下来了看看,可以了.哇哈哈哈哈 ...
- $.post({})请求springmvc -5.x 的方法，没有 返回数据的情况
转载请注明出处,毕竟调试了一天 今天用$.post({})传递参数,账号和密码来验证登录,验证成功返回1,验证不成功返回0,结果,$.post({}),的回调函数一直无法执行,但是原来是可以的,不重大 ...
- MySQL5.5安装（Windows版本）
1. 官网下载mysql5.5 下载地址:http://dev.mysql.com/downloads/mysql/5.5.html#downloads 2. 安装mysql5.5(安装之前,请关闭杀 ...
- error:0906D064:PEM routines:PEM_read_bio:bad base64 decode
今天在使用easywechat对接企业打款到银行卡时,遇到了两个错误 error:0906D064:PEM routines:PEM_read_bio:bad base64 decode 和 erro ...
- redis相关操作&基本命令使用
Redis简介 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. Redis是 NoSQL技术阵营中的一员,它 ...
- 运行TensorFlow报错，“This program requires version 3.6.1 of the Protocol Buffer runtime library, but the installed version is 3.0.0.”
报错信息: [libprotobuf FATAL google/protobuf/src/google/protobuf/stubs/common.cc:67] This program requir ...
- Go语言基础-序言
2018年6月,第一次接触go语言,在之后通过多本书籍渐渐了解go语言之后,开启了自己go语言全栈工程师的道路.特此记录,希望能给后学的朋友提供一个方向. 语言是一门寻寻渐进的课程,结合自己这两个月的 ...