博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

JavaSrcipt报错时，说对象不支持此方法，XXX is not a function的情况

Posted on 2013-03-12 10:51  言冰的夏虫  阅读(317)  评论(0)  编辑  收藏  举报 
         在工作中，有时会用到JS写一些不用框架的js代码，用来控制客户端浏览器的一些动作。但是在这个过程中，常常会碰到一些很奇怪的问题。我最近就碰到过这方面的情况。

比如，当我在一个表单中，增加一个button，在该button中，定义一个函数，如：

            <input type="button" name="selectButton" onclick="ClearPacket()"  id="ClearPacket">.

         而在 <head></head>标签中定义如下函数：

        <script type="text/javascript">

              function ClearPacket(){

                    window.location.href="logInfo_clearPacket.action";

               }

         </script>

          此时，当点击上面的selectButton'时，根本没有响应，当继续跟踪调试时，会出现如下错误：对象不支持此方法，ClearPacket is not a function。

          这种情况很奇怪，明明我已经在上面定义了该button,也定义button对应的onclick方法，浏览器却说没有该方法。对与该问题，找了很久，

    调试了很久，最终得到的结论如下：

          因为我的input是在form表单中，如果此时input button按钮的js方法，本例中的onclick="ClearPacket()"与 id="ClearPacket" 重复了，
         
    此时会容易报出类似的错误。

          除非id名与onClick="ClearPacket()"在方法上不要重名，这可能是js解析器在解析时，首先解析的是id名造成的。此时，将所有的ClearPacket都当成了id了。

          因此，最好的方法是，每个表单中，其id与方法名不要重复，这样的话，不会再出现类似的问题了。