button元素的id与onclick的函数名字相同 导致方法失效的问题

需求需要在原先页面添加一个按钮,触发一个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的事件绑定

踩过的坑总结下,共勉

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券