Javascript函数'；不是一个函数'；当以表格形式调用时

因此，我有一个简单的表单扩展脚本：

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>

现在函数可以正常工作，除非它是从表单内部调用的。当按原样执行时，我get

newField不是一个被称为错误的函数，但是如果您删除表单标记，它运行正常

知道发生了什么吗？
添加字段
<button id='newField' type='button' onclick=newField();>Add Field</button>


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

。请注意，这不是你应该依赖的行为，但正是出于这个原因，你应该对此保持警惕。请注意，全局范围内的不可预测行为是避免使用全局范围的一个很好的理由。
Add字段

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

。请注意，这不是你应该依赖的行为，但正是出于这个原因，你应该对此保持警惕。请注意，全局范围内的不可预测行为是避免使用全局范围的一个很好的理由。
通过将按钮“newField”的id更改为其他id进行检查通过将按钮“newField”的id更改为其他id进行检查
<button id='newField' type='button' onclick=newField();>Add Field</button>