在表单中调用时的 Javascript 函数 'is not a function'

Question

所以我有一个简单的表单扩展脚本:

var counter=1;
function newField(counter) {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = "formcheck"+counter;
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
}

在表单内部调用:

<form id='newanimal' action='/submit' method='post'>    
<span id='writeroot'></span>
<button id='newField' type='button' onclick=newField();>Add Field</button>
</form>

readroot 看起来像这样:

<div id="readroot" style="display: none">

<input type="button" value="Remove review"
            onclick="this.parentNode.parentNode.removeChild(this.parentNode); counter--;" /><br /><br />

<input id="checkform" name="checkform" value="New Checkform" />
</div>

现在该函数可以正常工作，除非它是从表单内部调用的。按原样执行时，我得到 newField is not a function 调用作为错误，但是如果删除表单标签，它就会正常运行。

知道发生了什么吗？

Answer 1

<button id='newField' type='button' onclick=newField();>Add Field</button>

当元素具有 id 属性时，可以使用该名称的全局变量来访问该元素。因此，您的函数 newField 会被对 id newField 的元素的引用覆盖。由于它现在是一个 HTML 元素，因此显然“不是一个函数”。

WhatWG spec for this 。请注意，这不是您应该依赖的行为，但正是由于这个原因，您应该对此保持警惕。请注意，全局作用域中不可预测的行为是避免使用全局作用域的一个非常充分理由。