`

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对象的方法,所以都会显示找不到方法。
分享到:
评论

相关推荐

    form中相同name的checkbox提交问题

    然而,当这些复选框具有相同的`name`属性时,提交表单时可能会出现一些特定的问题。这篇博客将探讨这个问题,并提供解决方案。 **一、表单提交与checkbox** 在HTML表单中,`&lt;input type="checkbox"&gt;`用于创建复选...

    jquery获取form表单input元素值的简单实例

    通过jQuery提供的val()方法和attr()方法,我们可以轻松获取或设置input元素的值。 首先,要获取表单中input元素的值,最常用的方法是使用jQuery的val()方法。当使用 $("#id") 选择器选中了一个元素后,可以使用 ....

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

    总结一下,要从name值一样的form表单中取值并拼接,主要步骤包括:获取同名的input元素集合,遍历并获取每个元素的值,使用`join()`方法拼接成字符串,然后根据需要处理这个字符串。在提供的"【压缩包子文件的文件...

    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表单中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

    jsp页面js调用form表单的值的方法

    ### JSP 页面中 JS 调用 Form 表单的值的方法 在 Web 开发中,JSP(Java Server Pages)是一种广泛使用的服务器端技术,它允许开发者将动态内容嵌入到静态 HTML 页面中。本篇文章主要介绍如何在 JSP 页面中通过 ...

    js form action动态修改方法.docx

    这段代码会在`form action`后面添加一个名为`param`的查询参数,其值为`paramValue`,并且使用`encodeURIComponent`对参数进行编码,防止特殊字符导致的问题。 4. **其他动态操作** - **动态创建和添加表单**:...

    FormValidation.js

    `FormValidation.js` 提供了详细的API文档,包括初始化、验证方法、事件、插件等,方便开发者根据具体需求进行深度开发和定制。 通过以上介绍,我们可以看到 `FormValidation.js` 的强大之处在于其丰富的验证规则、...

    关于jquery.validate.js 相同name的多个元素只能验证第一个元素的解决办法

    ### 关于jQuery Validate 插件中相同name的多个元素只能验证第一个元素的问题及解决方法 #### 问题背景 在Web开发中,表单验证是非常重要的一环,它能够确保用户输入的数据符合预期的要求,从而避免数据错误或者...

    JavaScript动态创建form表单并提交的实现方法

    在上述代码中,我们定义了一个名为MakeForm的函数,它首先创建了一个&lt;form&gt;元素,并设置了该元素的id和name属性。接着创建了一个类型为"text"的&lt;input&gt;元素,并设置了其type、name、value属性。然后将这个&lt;input&gt;...

    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=...

    js form表单input框限制20个字符,10个汉字代码实例.docx

    通过上述方法,我们可以有效地限制用户在Form表单Input框中的输入长度,确保数据的有效性和一致性。这种方法不仅适用于汉字输入限制,也可以轻松扩展到其他特殊字符或格式的输入限制。希望本文对你有所帮助,在实际...

    HTMLFORM表单,input标签的说明.pdf

    `&lt;form&gt;` 标签是创建表单的基础,它的 `action` 属性定义了处理表单数据的服务器端脚本,而 `method` 属性则指定了数据发送的方式,如 "GET" 或 "POST"。 在表单中,`&lt;input&gt;` 标签是最常用的控件之一,它可以以...

    基于jQuery和layui的form表单自定义js动态生成

    $('#dynamicForm').append('&lt;label&gt;' + item.label + ':&lt;/label&gt;&lt;input type="text" name="' + item.name + '" lay-verify="required" /&gt;'); } }); form.verify({ required: function(value, item) { if (!value...

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

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

    form提交时传递额外的参数几种常见方法

    在Web开发中,表单提交是一种常见的方式,用于将数据发送到服务器。但是在某些情况下,除了表单内的数据外,还需要向服务器...每种方法都有其适用场景和限制,了解这些可以为开发者在处理类似问题时提供更多的灵活性。

    JavaScript获取网页表单action属性的方法

    JavaScript获取网页表单的action属性是一种常用的操作,通常用于获取表单提交时要发送到的URL地址。在Web开发中,表单是用来收集用户输入数据并将其发送到服务器的HTML元素。action属性指定了表单提交后,服务器处理...

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

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

    INPUT的TYPE用法

    具有相同`name`属性的单选按钮组内只能选择一个。通过`value`属性定义选项的值,`checked`属性表示预选状态。 ### 8. `type="image"` - 图像提交按钮 `type="image"`创建一个图像作为提交按钮,点击图像的不同部分...

Global site tag (gtag.js) - Google Analytics