点击记数
普遍的写法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="22"> <input type="button" value="22"> <input type="button" value="22"> <input type="button" value="22"> <div id="a" style="width:100px;height:100px;background:green;"></div> </body> </html> <script type="text/javascript"> window.onload = function () { var obtn = document.getElementsByTagName("input"); var i=0; for(i=0;i<obtn.length;i++){ aa(obtn[i]); } }; function aa(obj) { var count = 0; obj.onclick = function () { console.log(count++); }; } </script>
另一种写法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="22"> <input type="button" value="22"> <input type="button" value="22"> <input type="button" value="22"> <div id="a" style="width:100px;height:100px;background:green;"></div> </body> </html> <script type="text/javascript"> window.onload = function () { var obtn = document.getElementsByTagName("input"); var i=0; for(i=0;i<obtn.length;i++){ (function (obj){ var count = 0; obj.onclick = function () { console.log(count++); }; })(obtn[i]); } }; </script>
注意aa(obtn[i])的写法转变为(fn)(obtn[i]),可以不用写函数名,把传入的参数放到方法的后面
繁琐的写法:
window.onload = function () { var obtn = document.getElementsByTagName("input"); var i=0; for(i=0;i<obtn.length;i++){ obtn[i].onclick = function (count) {//省去变量的声明 return function () { console.log(count++); } }(0); } };
只有在泥泞的道路上才能留下脚印
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步