以表格形式調用時，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規范 。 請注意，這不是您應該依靠的行為，但正是由於這個原因，您應該對此保持警惕。 需要注意的是在全球范圍內不可預測的行為是一個很好的理由，以避免使用全局范圍。