js函数名与form表单元素同名冲突的问题

204 阅读 0 评论 135 点赞

我是靠谱客的博主羞涩保温杯，最近开发中收集的这篇文章主要介绍js函数名与form表单元素同名冲突的问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天在导出Excel的时候用了Form 表单的input hidden 来区分导出和搜索。开始的时候js中的onClick事件的函数名和 hidden 中的 id 命名一样。结果导致报错：调用函数的那一行对象不支持此属性。

找了很长时间都找不出原因，开始的时候一直以为是写错了某个字母，才发现js函数根本没有执行。后来没有办法直接调用了别的函数，发现就有用了，认为是函数名的原因，改了函数名才有用了。然后再将input中的id改成很函数名一样，又出现报错了。在没有下例验证之前，还一直以为是ThinkPHP模板解析的bug。因为有了如下示例，所以证实是js中的函数名不可以和元素中的id相同。

如下例：

复制代码代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>ceshi</title>
<script>
function a()
{
 document.getElementById('a').value="test";
 alert(document.getElementById('a').value);
 return false;
}
</script>
</head>
<body>
<form>
<input type="hidden" id="a" name="a" value="" />
<input type="button" value="excel" onClick="javascript：a();"/>
</form>
</body>
</html>