xxx is not a function

最新推荐文章于 2024-05-10 21:46:03 发布

Tsui丶

最新推荐文章于 2024-05-10 21:46:03 发布

阅读量383

点赞数

分类专栏： Js+JQ 文章标签： JavaScript java HTML

本文链接：https://blog.csdn.net/qq_35728177/article/details/76474835

版权

Js+JQ 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

xxx is not a function

     HTML代码 
   

<html>
<head>
<script type="text/javascript">
function selectAll(){
alert("111111");
}
</script>
</head>
<body>
<input type="checkbox" name="selectAll" id="selectAll" οnclick="selectAll(this)"/>
</body>
</html>

上面代码出错，报“对象不支持此方法（selectAll）或属性”，个人分析是因为checkbox也是个html dom对象，这样的话，会先找到这个对象，而checkbox本身是没有selectAll方法的，所以出错了。所以要把方法名或者该对象的name和id改成别的名字，不要同名就可以正确运行了。

今天突然碰到form表单的名字与js方法的名字相同导致找不到js方法的问题，根据网上的一些资料和自己的理解，总结出一定原因，个人理解有错误请指正~~~
代码：

     Html代码  
      
     
   
 <form name="test" id="test" >  
 <a href="#"  onclick="test()" name="test">aa</a>  
 </form>  
   
 <script type="text/javascript">  
 function test(){   
     alert("ssss");   
 }   
 </script>  

这样就提示找不到test方法。
这个form是一个HTML DOM对象有莫大的关系，根据事件的触发对象的作用域链往上找名为test的对象，因为javascript中方法其实也为对象，在沿着对象的作用域链往上找时，他首先回找到名字为test的HTML DOM对象form，而不会找到window.test这个对象，而找到的这个test不是一个方法，所以会提示找不到方法。这跟以下代码情况是一样的

     Html代码  
      
     
   
 <form name="aaa" id="test" >  
 <input type="button"  onclick="test()" name="test">aa</a>  
 </form>  
   
 <script type="text/javascript">  
 function test(){   
     alert("ssss");   
 }   
 </script>  

因为button也是一个HTML DOM对象，所以首先找到的是button这个对象，所以也提示找不到方法。

改成外部绑定事件就不会出现这种情况，因为这时这时aa的环境就在window对象中，回直接找到test方法，看代码：

     Html代码  
      
     
   
 <form name="aaa" id="test" >  
 <input type="button"  onclick="test()" name="test">click me</a>  
 </form>  
   
 <script type="text/javascript">  
 var aa = document.getElementById("sss");   
 aa.onclick = test;   
 function test(){   
     alert("ssss");   
 }   
 </script>  