Uncaught TypeError: xxx is not a function
- 導致該報錯最常見的一種原因是 調用對象屬性或其他非方法的字段時誤加了小括號 ， 導致 JS 找到了這個名稱，但發現這並不是一個方法。
- 本文主要記錄導致該報錯的另一種原因: form 表單中方法的名稱與 id 或者 name 重複導致
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="">
<input type="button" name="btn01" id="btn01" onclick="btn01()" value="測試01">
<input type="button" name="btn02" id="btn02" onclick="window.btn02()" value="測試02">
</form>
<input type="button" name="btn03" id="btn03" onclick="btn03()" value="測試03">
</body>
<script type="text/javascript">
function btn01() {
alert('btn01');
}
function btn02() {
alert('btn02');
}
function btn03() {
alert('btn03');
}
</script>
</html>
運行結果
-
點擊"按鈕1"時：Uncaught TypeError: btn01 is not a function at HTMLInputElement.onclick (page1.html:9)
-
點擊"按鈕2"時：正常彈窗
-
點擊"按鈕3"時：正常彈窗
原因分析：
-
正常情況下，button 的 name 屬性的值、id 屬性的值以及事件(這裏以 onclick 爲例)的名稱在使用時是互不影響的。如：按鈕3;
-
在 form 表單中，由於 form 標籤作用域的特殊性，位於 form 表單中的 input 的屬性都屬於 form，當然也包含 button 的 onclick 事件，button 的 onclick 事件會爲 btn01 方法傳入一個隱式參數 this 表示 form 這個作用域，所以，這裏的 onclick 事件 會優先調用 form 表單中的 btn1 方法，
當 form 中不存在 btn01 時，則會調用 window 中定義的方法，而這裏 form 中存在 btn01，但是 btn1 卻是 name 和 id 屬性，所以報錯： btn01 is not a function。 例如：按鈕1 -
如果不想修改 button 的 name 和 id 屬性以及方法名，只需要指定該 button 調用的事件爲 window 中的事件而非 form 中的事件，即可。如下：οnclick=“window.btn02()”。例如：按鈕2