说明：代码段来源于：《锋利的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"的更多相关文章

  1. 怎么用JavaScript写一个区块链？

    几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...

  2. go server框架学习之路 - 写一个自己的go框架

    go server框架学习之路 - 写一个自己的go框架 用简单的代码实现一个go框架 代码地址: https://github.com/cw731/gcw 1 创建一个简单的框架 代码 packag ...

  3. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  4. js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  5. 输出复选框选中的文件名 checkbox

    1. <tr>        <td><input  type="checkbox" name="cbxFileName"/> ...

  6. jquery easyui datagrid 空白条处理 自适应宽高 格式化函数formmater 初始化时会报错 cannot read property 'width'||'length' of null|undefined

    1---表格定义好之后右侧可能会有一个空白条 这个空白条是留给滚动条的,当表格中的一页的数据在页面中不能全显示时会自动出现滚动条,网上有很多事要改源码才可以修改这个,但是当项目中多处用到时,有的需要滚 ...

  7. Python3+Selenium3+webdriver学习笔记8（单选、复选框、弹窗处理）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...

  8. javascript : 写一个类似于 jquery css() 的方法

    我们知道,jquery css() 方法可以很方便的更改DOM的样式. 但从原理上,这个并不复杂,我们完全可以自己写一个. 上代码. updateDOMStyle(DOM, obj){ Object. ...

  9. JavaScript写一个连连看的游戏

    天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...

随机推荐

  1. 【[HNOI2012]矿场搭建】

    抄题解真开心 我真是越来越菜了 这是点双的板子题,于是求出所有点双,之后讨论 如果点双里之有一个割点,那么如果这个割点炸了,这个点双就出不去了,于是我们得在这个点双内部除了这个割点位置放一个 如果有两 ...

  2. verilog实现的16位CPU设计

    verilog实现的16位CPU设计 整体电路图 CPU状态图 idle代表没有工作,exec代表在工作 实验设计思路 五级流水线,增加硬件消耗换取时间的做法. 具体每一部分写什么将由代码部分指明. ...

  3. C/C++结构体字节对齐详解

    结构体的sizeof先看一个结构体:struct S1{    char c;    int i;}; sizeof(S1)在VC6中按默认设置得到的结果为8.我们先看看sizeof的定义——size ...

  4. select和epoll

    C/S编程模型,对每一个客户端都要开辟一个新的线程,效率必定低下.普通select模型是开辟两个线程,一个用来监听客户端的连接,另一个用于处理客户端请求. fd_set set; FD_ZERO(&a ...

  5. C#中HttpWebRequest的用法详解（转载）

    1.HttpWebRequest和HttpWebResponse类是用于发送和接收HTTP数据的最好选择.2.命名空间:System.Net3.HttpWebRequest对象不是利用new关键字创建 ...

  6. 10JavaScript作用域

    (作用域可访问变量的集合) 1.JavaScript 作用域 在 JavaScript 中, 对象和函数同样也是变量. 在 JavaScript 中, 作用域为可访问变量,对象,函数的集合. Java ...

  7. TinyMCE插件：RESPONSIVE filemanager 9 安装与配置

    RESPONSIVE filemanager 功能: 文件上传 文件下载 重命名文件 删除文件 新建文件夹 为每个用户创建子目录 上传文件效果图: 浏览文件效果图: 文件说明: filemanager ...

  8. PHP 判断密码强度

                 $score = 0;            if(preg_match("/[0-9]+/",$str))            {           ...

  9. python学习笔记（二）python基础知识(list,tuple,dict,set)

    1. list\tuple\dict\set d={} l=[] t=() s=set() print(type(l)) print(type(d)) print(type(t)) print(typ ...

  10. gi的安装和使用

    Git的安装 git是什么? git是一种版本控制器,更直白的说,团队开发的时候,管理代码使用的软件 Linux下的安装 yum install git Git的配置 在使用git之前,需要先进行配置 ...