JS 中因 button 的 name 或 id 与 function 的名字相同导致的 xxx is not a function 问题

最新推荐文章于 2023-01-09 13:40:06 发布

HolaSecurity

最新推荐文章于 2023-01-09 13:40:06 发布

阅读量865

点赞数 2

分类专栏：『问题记录』文章标签： is not a function name id function 名字相同

本文链接：https://blog.csdn.net/shaotaiban1097/article/details/102857577

版权

『问题记录』专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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