<a>标签

JS异常处理：Uncaught TypeError: xxx is not a function at HTMLAnchorElement.onclick

2018年01月09日 15:35:27 chunlynn 阅读数：9866 标签： 异常处理JavaScriptnot a functionUncaught TypeErroronclick 更多

个人分类： Exception异常处理

 

版权声明：本文为博主（chunlynn）原创文章，转载请注明出处 https://blog.csdn.net/chenchunlin526/article/details/79013192

JS异常处理：Uncaught TypeError: xxx is not a function at HTMLAnchorElement.onclick 

---- 关于<a>标签调用onclick中的方法无效的原因

今天在优化别人写的代码时，出了个错误。

原代码如下，我想把href属性函数改为onclick事件

<a href="javascript:search();" class="indbtn_search">搜索</a>

改成如下：

<a href="javascript:void(0);" class="indbtn_search" onclick="search();">搜索</a>

这样是更加标准的写法。一般编程不建议的href属性里面写函数方法，而是建议在onclick里面写。具体可以参考：

<a>标签中 href 和 onclick 的区别，以及 onclick="xxx(this);"传递this参数详解 - chunlynn的小屋 - CSDN博客

结果一运行，原代码是正常的，改动后报错了！说search不是一个函数。

而我的search()函数，是有定义的，因为改为onclick之前，程序代码都是正确的，search()方法定义如下：

function search() {

    var search = $.trim($("#searchInput").val());

    if (search == '') {

         $("#searchInput").addClass("indsearch-error");

        return;

    }

// ......

    var searchExpression = search.replace(/s+/g, ' ');

    var reg1 = /^[a-zA-z]{2}d{5,}.*[0-9A-Z)]$/; //CN123, US012(A)

    if (reg1.test(search)) {

        searchExpression = "申请号,公开（公告）号+='" + search + "%'";

    }  else {

        var tmp = searchExpression.replace(/\=/g, '');

        // ......

    }

    $("#searchExpression_form1").val(searchExpression);

    searchTips = _.map(tipsArr, function(item) { return item; }).join('###');

    setCookie('searchTips', searchTips);

    $("#form1").submit();

}

那这是什么原因呢？为什么用 href="javascript:search();" 可以，而用onclick="search();" 确不行呢？

 

经过我在努力搜寻，综合国外著名论坛 

https://stackoverflow.com/questions/12816400/javascript-typeerror-xxx-is-not-a-function  

和国内一些博客，终于找到了答案，总结如下：

主要原因有几点：

1、首先确保这函数的js被引入到了页面；Are you certain you added the script to the page？

2、在调用该方法时，确保该方法已经被加载了。在浏览器控制台输入该方法，能正常运行。 Are you certain it has loaded before you try to call search(); ?

3、使用onclick绑定函数事件时，必须确保href写成 href="javascript:void(0);" 或者 href="javascript:;" 这样，第1种形式中的void表达式中的0不能少。如果少些了0，会报“Uncaught SyntaxError: Unexpected token )”的错误。

4、函数名不能和页面的某个标签的id名相同。一些浏览器可以通过在js代码中指定ID访问节点元素，然后定义的函数就会被DOM中的元素覆盖了。您需要重命名函数名称或元素ID。

Can you provide the html code, maybe you have an element with id search?
in your html code has ID search just like the name of the function.
some browsers can access the node elements just by specifying the ID in the js code and then the function 
defined is overridden by the element in the DOM.
you need to rename the function name or the element ID.

 

经过审查我的代码，发现我的代码出错就是因为第4点原因，search()函数名和该页面包含的子页面中的一个标签

的id="search"相同了，下面代码为当前的页面包含的一个弹窗页面里的div.

1.  
   <div id="simple-search" class="simple-search ver_center_fa">
2.  
   <a id="delContent" class="icon25 icon-delbtns" style="display:none;" onclick="clearf()"></a>
3.  
   <input id="input_ipc" class="search_input" type="text" placeholder="请输入IPC分类号或关键词">
4.  
   <a id="search" href="javascript:void(0)" class="btn_search sprite"></a>
5.  
   </div>

这里有个<a>标签的id="search"，和我们的方法 search() 同名了，因此引发了冲突了。
解决方法：重命名函数名称或元素id即可。我将该id改为了id="ipc_search" 就好了。

思考：那为什么我优化之前用 href="javascript:search();" 可以且没有报错呢，为什么没有与id="search"冲突？

<a>标签的href属性，其中href是hypertext reference的缩略词，用于设定链接地址。链接地址必须为url地址，
如果没有给出具体路径，则默认路径和当前页的路径相同。
而使用href="javascript:xxx();"，这种写法本身就是不正规的，是不建议的！ javascript: 是一个伪协议，其他的伪协议还有 mail:  tel:  file:  等等。javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 和javascript:void(0);表示什么都不执行，这样点击<a>时就没有任何反应。

所以我上面那个href="javascript:search();" 代码，为什么没有报错，具体原因我也不清楚，也许只是偶然，或者其他原因，有知道的朋友请评论告知我，谢谢！