space dcl NPU exp 博客 fine sea category --

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();" 代碼，為什麽沒有報錯，具體原因我也不清楚，也許只是偶然，或者其他原因，有知道的朋友請評論告知我，謝謝！

<a>標簽