以表格形式调用时，Javascript函数“不是函数”

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称为错误newField is not a function ，但是，如果删除表单标签，它将正常运行。

知道发生了什么吗？

Answer 1

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

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

这是WhatWG规范 。 请注意，这不是您应该依靠的行为，但正是由于这个原因，您应该对此保持警惕。 需要注意的是在全球范围内不可预测的行为是一个很好的理由，以避免使用全局范围。