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();" 確不行呢？
經過我在努力搜尋，綜合國外著名論壇
和國內一些博客，終於找到了答案，總結如下：
主要原因有幾點：
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.
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.
<div id="simple-search" class="simple-search ver_center_fa">
<a id="delContent" class="icon25 icon-delbtns" style="display:none;" onclick="clearf()"></a>
<input id="input_ipc" class="search_input" type="text" placeholder="請輸入IPC分類號或關鍵詞">
<a id="search" href="javascript:void(0)" class="btn_search sprite"></a>
</div>解決方法：重命名函數名稱或元素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();" 代碼，爲什麼沒有報錯，具體原因我也不清楚，也許只是偶然，或者其他原因，有知道的朋友請評論告知我，謝謝！