今天突然碰到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对象的方法,所以都会显示找不到方法。
分享到:
相关推荐
form表单中的文本框的name值一样时,要取到所有的文本框中的值并传到后台时写的一种javascript中的拼接字符串的方法,希望可以帮到你们!
在项目中因为动态表单无法确定标签...form:input path=formAttribute1 class=input-xlarge value= name=测试1/> <form:input path=formAttribute1 class=input-xlarge value= name=测试2/> <form:input p
先看下基于JS代码实现input密码输入框输入密码变黑点...input type=hidden id=md5-password name=password> <button type=submit>Submit</button> </form> js代码 function checkForm() { v
script language="JavaScript" type="text/javascript" src="JS/validate.js"> 在form表单上添加一个提交事件调用验证数据方法 <form name="listform" action="resume-doAdd" method="post" onsubmit="return ...
本文实例讲述了JavaScript获取表单内所有元素值的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以遍历指定表单中的所有元素,并输出元素的值 <!DOCTYPE html> <html> <body> <form id=...
-- 三个相同name的input --> <input name=zhai/> <input name=zhai/> </form> jquery validate在对多个相同name校验时,只校验第一个input框。 解决方案一: 在表单页对应的js中加入如下...
javascript的IE和Firefox兼容性汇编 1. document.form.item 问题 (1)现有问题: 现有代码中存在许多 document....又如:document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
npm install form-input var formInput = require ( 'form-input' ) ( ) ; < script src =" form-input.js " > </ script > < script > var formInput = window . formInputGenerator ( ) ; &...
安装$ npm install react-form-input --save例子 import Input , { validators , transformers } from 'react-form-input' ;class Form extends React . Component { constructor ( props , context ) { super ( ...
input type="text" name="person.name.first" value="John" /> <input type="text" name="person.name.last" value="Doe" />将被转成:{ "person": { "name": { "first": "John", "last...
本文实例讲述了JS定义网页表单提交(submit)的方法。分享给大家供大家参考。具体如下: 这段代码表示网页表单提交时不是提交到指定的页面,而是执行一个特定的函数 [removed] function saveInfo() { localStorage...
Laravel表单Javascript对象 这是用于使用面向对象方法处理表单的程序包。安装在您的控制台中运行: # Using npm npm install laravel-form-js # Using yarn yarn add laravel-form-js用法使用Vue的示例< template> &...
2.1: js 不为空、为空或不是对象 、判断为空 、判断不为空 2.2:比较两个表单项的值是否相同 2.3:表单只能为数字和"_", 2.4:表单项输入数值/长度限定 2.5:中文/英文/数字/邮件地址合法性判断 2.6:限定表单项不能输入...
js完美解决jsp文本框限制只能输入数字、小数问题,只需 <input name="text" type="text" size="10" oncontextmenu="return false;" oncontextmenu="return false;" onKeyDown="keyNumDown(this, '8', '2')"> ...
使用时请将下面的javascript代码存到一个单一的js文件中。 1、表单要求 <form name="formname" onSubmit="return validateForm(this)"></form> 将对表单中的所有以下类型的域依次验证,所有验证是去除了前导和后缀...
原理就是:一般使用遍历的方法,判断每个Radio是否被选中,如果是,再取其值. <form id=userlist method=post action=option.php> <input type=radio name=userid value=1>1 <input type=radio name=...
如果需要带参数的话可以在action中定义那个参数名paraName,并生成setter和getter方法 方法二: <script type= "text/javascript"> function formSubmit(url) { document.forms[0].action=url; document....
通过js模拟post提交 1:请求需要的参数过长,超过get允许的最大长度 2:想要隐藏地址栏的参数 //新创建一个form表单 [removed]('<form name=myForm></form>'); var myForm=document.forms['myForm']; ...
本文实例讲述了Javascript获取表单名称(name)的方法。分享给大家供大家参考。具体如下: 下面的代码通过表单的name属性获得表单名称 <!DOCTYPE html> <html> <body> <form id=frm1 name=form1&...
1、JS部分代码 代码如下: /** * 提交表单 */ function submitForm(action, actName, objName, formName,blogType){ $(“#”+formName).attr(“action”,action); //var f = document.getElementsByTagName(“form”)...