【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>