JavaScript函数名与HTML元素ID同名导致的冲突问题

JavaScript函数名与HTML元素ID同名导致的冲突问题

在导出Excel功能中，通常使用Form表单内的input hidden元素来区分导出与搜索操作。若在JavaScript中定义的onClick事件处理函数名称与该hidden元素的id属性值完全相同，运行时会触发错误：提示“对象不支持此属性”，导致调用该函数的代码行执行失败。

排查过程中，起初误以为是拼写错误，后发现JavaScript函数实际上并未被执行。尝试调用其他不同名的函数则正常运行，由此推断问题出在函数命名上。修改函数名后问题消失；若再将input的id改回与原函数名一致，错误重现。在未通过具体示例验证前，曾怀疑是ThinkPHP模板解析的bug，但后续示例证实了JavaScript函数名不应与页面元素的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>

网页错误详细信息

用户代理: Mozilla/4.0 (compatible: MSIE 8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727) 时间戳: Thu, 27 Jan 2011 13:30:09 UTC

消息: 对象不支持此属性或方法 行: 17 字符: 1 代码: 0 URI: file:///C:/Documents%20and%20Settings/Administrator/桌面/test.html