表单域name和js函数重名引起的问题

最新推荐文章于 2019-03-02 10:27:33 发布

愤怒的不争

最新推荐文章于 2019-03-02 10:27:33 发布

阅读量1.2k

点赞数

分类专栏： 2 - HTML/CSS/Javascript 文章标签： input button 文档 function 联想 html

本文链接：https://blog.csdn.net/congcat/article/details/3041125

版权

2 - HTML/CSS/Javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

无意中遇到这个问题，如下面的html代码：

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function add(){
    alert("call add method.");
}
function input(){
    alert("call input method");
}
</script>
</head>
<body>
<form>
    <input type="button" name="add" value="添加" onclick="add()" />
    <input type="text" name="input" value="输入" onclick="input()" />
</form>
</body>
</html>
 

在IE中运行提示错误：对象不支持此属性或方法

在FF中运行提示错误：add is not a function 和 input is not a function

以前并没有遇到这样的错误，郁闷好久之后，一气之下把修改了add和input的方法名为add1和input1，结果能正常运行了。

于是联想到FF中的错误提示，猜测出错的原因是按钮的名称add和函数名add重复了，于是又尝试了如下代码：

 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function add(){
    alert("call add method.");
}
function input(){
    alert("call input method");
}
</script>
</head>
<body>
<form>
    <input type="button" name="input" value="添加" onclick="add()" />
    <input type="text" name="add" value="输入" onclick="input()" />
</form>
</body>
</html>
 
 

仍然会报出相同的错误，这就更验证了我的猜测。

再尝试下列代码：

 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function add1(obj){
    //alert("call add method.");
    alert(obj.value);
}
function input1(){
    alert("call input method");
}
</script>
</head>
<body>
<form name="form1">
    <input type="button" name="add" value="添加" onclick="add1(input)" />
    <input type="text" name="input" value="输入" onclick="input1()" />
</form>
<form name="form2">
    <input type="button" name="btn" value="Form2_按钮" onclick="alert(add.value);" />
</form>
</body>
</html>
 
 

会发现 form1的按钮[添加]和onclick事件能正常执行， form2的按钮[Form2_按钮]onclick事件出错。

再尝试下面2段代码：

 
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function add1(obj){
    //alert("call add method.");
    alert(obj.value);
}
function input1(){
    //alert("call input method");
    alert(form2.btn.value);
}
</script>
</head>
<body>
<form name="form1">
    <input type="button" name="add" value="添加" onclick="add1(input)" />
    <input type="text" name="input" value="输入" onclick="input1()" />
</form>
<form name="form2">
    <input type="button" name="btn" value="Form2_按钮" onclick="alert(form1.add.value);" />
</form>
</body>
</html>
 
  

 
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function add1(obj){
    //alert("call add method.");
    alert(obj.value);
}
function input1(){
    //alert("call input method");
    alert(form2.btn.value);
}
function btn(){
    alert("call btn method");
}
</script>
</head>
<body>
<form name="form1">
    <input type="button" name="add" value="添加" onclick="btn()" />
    <input type="text" name="input" value="输入" onclick="input1()" />
</form>
<form name="form2">
    <input type="button" name="btn" value="Form2_按钮" onclick="alert(form1.add.value);" />
</form>
</body>
</html>
 
  

会发现事件执行的很好。

于是就想到了，

1.form是可以直接通过name来调用对应的form对象。

2.在同一form中，各个表单域又可以直接通过各自的name来调用各自的对象。

3.由于js中，函数也是对象，于是就引发了第一个代码段中的问题。

愤怒的不争

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单域name和js函数重名引起的问题

无意中遇到这个问题，如下面的html代码： html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" content="text/html; charset=gb2312" />title>无标题文档title>script type="text/javascript"
复制链接

扫一扫

专栏目录