zoukankan      html  css  js  c++  java
  • 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的事件绑定

     

    踩过的坑总结下,共勉

  • 相关阅读:
    深入浅出Tomcat/2
    深入浅出Tomcat/1- 来历和配置文件
    深入浅出:HTTP/2
    深入浅出:5G和HTTP
    深入浅出:远离法律风险,必须了解开源项目许可证
    深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么
    深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么
    深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么
    一个微信群的现状
    Hbase原理、基本概念、基本架构
  • 原文地址:https://www.cnblogs.com/chywx/p/10287110.html
Copyright © 2011-2022 走看看