`

form或input name和js方法名相同问题

阅读更多
今天突然碰到form表单的名字与js方法的名字相同导致找不到js方法的问题,根据网上的一些资料和自己的理解,总结出一定原因,个人理解有错误请指正~~~
代码:
<form name="test" id="test" >
<a href="#"  onclick="test()" name="test">aa</a>
</form>

<script type="text/javascript">
function test(){
	alert("ssss");
}
</script>


这样就提示找不到test方法。
这个form是一个HTML DOM对象有莫大的关系,根据事件的触发对象的作用域链往上找名为test的对象,因为javascript中方法其实也为对象,在沿着对象的作用域链往上找时,他首先回找到名字为test的HTML DOM对象form,而不会找到window.test这个对象,而找到的这个test不是一个方法,所以会提示找不到方法。这跟以下代码情况是一样的
<form name="aaa" id="test" >
<input type="button"  onclick="test()" name="test">aa</a>
</form>

<script type="text/javascript">
function test(){
	alert("ssss");
}
</script>


因为button也是一个HTML DOM对象,所以首先找到的是button这个对象,所以也提示找不到方法。


改成外部绑定事件就不会出现这种情况,因为这时这时aa的环境就在window对象中,回直接找到test方法,看代码:
<form name="aaa" id="test" >
<input type="button"  onclick="test()" name="test">click me</a>
</form>

<script type="text/javascript">
var aa = document.getElementById("sss");
aa.onclick = test;
function test(){
	alert("ssss");
}
</script>


总结:
用元素的onclick事件时,文档中不能出现与方法名一样的HTML DOM对象,因为根据作用域链他最后才会找到window对象的方法,所以都会显示找不到方法。
分享到:
评论

相关推荐

    将name值一样的input值拼接起来

    form表单中的文本框的name值一样时,要取到所有的文本框中的值并传到后台时写的一种javascript中的拼接字符串的方法,希望可以帮到你们!

    js获取form表单中name属性的值

    在项目中因为动态表单无法确定标签...form:input path=formAttribute1 class=input-xlarge value= name=测试1/&gt; &lt;form:input path=formAttribute1 class=input-xlarge value= name=测试2/&gt; &lt;form:input p

    JS获得多个同name 的input输入框的值的实现方法

    先看下基于JS代码实现input密码输入框输入密码变黑点...input type=hidden id=md5-password name=password&gt; &lt;button type=submit&gt;Submit&lt;/button&gt; &lt;/form&gt; js代码 function checkForm() { v

    JS验证页面form表单数据,齐全

    script language="JavaScript" type="text/javascript" src="JS/validate.js"&gt; 在form表单上添加一个提交事件调用验证数据方法 &lt;form name="listform" action="resume-doAdd" method="post" onsubmit="return ...

    JavaScript获取表单内所有元素值的方法

    本文实例讲述了JavaScript获取表单内所有元素值的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以遍历指定表单中的所有元素,并输出元素的值 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;form id=...

    jQuery Validate 校验多个相同name的方法

    -- 三个相同name的input --&gt; &lt;input name=zhai/&gt; &lt;input name=zhai/&gt; &lt;/form&gt; jquery validate在对多个相同name校验时,只校验第一个input框。 解决方案一: 在表单页对应的js中加入如下...

    javascript的IE和Firefox兼容性汇编

    javascript的IE和Firefox兼容性汇编 1. document.form.item 问题 (1)现有问题: 现有代码中存在许多 document....又如:document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]

    form-input:使用反馈呈现表单输入和表单输入组

    npm install form-input var formInput = require ( 'form-input' ) ( ) ; &lt; script src =" form-input.js " &gt; &lt;/ script &gt; &lt; script &gt; var formInput = window . formInputGenerator ( ) ; &...

    react-form-input

    安装$ npm install react-form-input --save例子 import Input , { validators , transformers } from 'react-form-input' ;class Form extends React . Component { constructor ( props , context ) { super ( ...

    表单转JSONform2js.zip

    input type="text" name="person.name.first" value="John" /&gt; &lt;input type="text" name="person.name.last" value="Doe" /&gt;将被转成:{  "person": {  "name": {  "first": "John",  "last...

    JS定义网页表单提交(submit)的方法

    本文实例讲述了JS定义网页表单提交(submit)的方法。分享给大家供大家参考。具体如下: 这段代码表示网页表单提交时不是提交到指定的页面,而是执行一个特定的函数 [removed] function saveInfo() { localStorage...

    laravel-form-js

    Laravel表单Javascript对象 这是用于使用面向对象方法处理表单的程序包。安装在您的控制台中运行: # Using npm npm install laravel-form-js # Using yarn yarn add laravel-form-js用法使用Vue的示例&lt; template&gt; &...

    js验证表单 js验证表单

    2.1: js 不为空、为空或不是对象 、判断为空 、判断不为空 2.2:比较两个表单项的值是否相同 2.3:表单只能为数字和"_", 2.4:表单项输入数值/长度限定 2.5:中文/英文/数字/邮件地址合法性判断 2.6:限定表单项不能输入...

    js完美解决jsp文本框限制只能输入数字、小数问题

    js完美解决jsp文本框限制只能输入数字、小数问题,只需 &lt;input name="text" type="text" size="10" oncontextmenu="return false;" oncontextmenu="return false;" onKeyDown="keyNumDown(this, '8', '2')"&gt; ...

    通用JS表单验证

    使用时请将下面的javascript代码存到一个单一的js文件中。 1、表单要求 &lt;form name="formname" onSubmit="return validateForm(this)"&gt;&lt;/form&gt; 将对表单中的所有以下类型的域依次验证,所有验证是去除了前导和后缀...

    JavaScript中获取Radio被选中的值

    原理就是:一般使用遍历的方法,判断每个Radio是否被选中,如果是,再取其值. &lt;form id=userlist method=post action=option.php&gt; &lt;input type=radio name=userid value=1&gt;1 &lt;input type=radio name=...

    js调用Action

    如果需要带参数的话可以在action中定义那个参数名paraName,并生成setter和getter方法 方法二: &lt;script type= "text/javascript"&gt; function formSubmit(url) { document.forms[0].action=url; document....

    javascript模拟post提交隐藏地址栏的参数

    通过js模拟post提交 1:请求需要的参数过长,超过get允许的最大长度 2:想要隐藏地址栏的参数 //新创建一个form表单 [removed]('&lt;form name=myForm&gt;&lt;/form&gt;'); var myForm=document.forms['myForm']; ...

    Javascript获取表单名称(name)的方法

    本文实例讲述了Javascript获取表单名称(name)的方法。分享给大家供大家参考。具体如下: 下面的代码通过表单的name属性获得表单名称 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;form id=frm1 name=form1&...

    form表单action提交的js部分与html部分

    1、JS部分代码 代码如下: /** * 提交表单 */ function submitForm(action, actName, objName, formName,blogType){ $(“#”+formName).attr(“action”,action); //var f = document.getElementsByTagName(“form”)...

Global site tag (gtag.js) - Google Analytics