button元素的id与onclick的函数名字相同 导致方法失效的问题
陈灬大灬海
发布于 2019-01-28 03:32:48
发布于 2019-01-28 03:32:48
代码可运行
运行总次数：0
代码可运行
需求需要在原先页面添加一个按钮，触发一个function，如此简单的操作，却无意间发现了一个问题。(还是对html了解的太少)
先看下在菜鸟教程的示例(错误代码)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function dianji(){
$("input[name='city']:checked").each(function(){
alert($(this).val());
})
}
</script>
</head>
<body>
<form>
<input type='button' id='dianji' onclick='dianji()' value='获取选中的城市'/><br />
<input type='checkbox' name='city' value='北京'/>北京 <br />
<input type='checkbox' name='city' value='上海'/>上海 <br />
<input type='checkbox' name='city' value='天津'/>天津 <br />
<input type='checkbox' name='city' value='重庆'/>重庆 <br />
</form>
</body>
</html>这个时候点击会出现Uncaught TypeError: dianji is not a function
为什么会这样呢？一看没啥毛病啊，function是绝对定义的。
之后可以将框中的代码一出form，变成如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function dianji(){
$("input[name='city']:checked").each(function(){
alert($(this).val());
})
}
</script>
</head>
<body>
<input type='button' id='dianji' onclick='dianji()' value='获取选中的城市'/><br />
<form>
<input type='checkbox' name='city' value='北京'/>北京 <br />
<input type='checkbox' name='city' value='上海'/>上海 <br />
<input type='checkbox' name='city' value='天津'/>天津 <br />
<input type='checkbox' name='city' value='重庆'/>重庆 <br />
</form>
</body>
</html>这个时候就正确了，可见是form的问题，原因
form中的input属性的值已经作为当前form的属性了，由于作用域问题，onclick访问的是form的dianji属性而不是外部的函数。
【dianji()会默认传递一个隐性参数this，此时的this代表的是form表单对象，会优先调用表单的属性，即dianji(this)，而不是调用window对象的dianji()方法】
解决方法：
- 修改id名不要与函数名相同
- onclick="dianji()"改为onclick="window.dianji()"表明是window对象的属性
- 使用jquery的事件绑定
踩过的坑总结下，共勉
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-01-18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
推荐阅读
相关推荐
【在线五子棋对战】五、前端扫盲：html && css && javascript && ajax && jquery && websocket
更多 >
腾讯云开发者
