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。请注意，这不是您应该依赖的行为，但出于这个原因，您应该警惕它。请注意，全局范围内不可预测的行为是避免使用全局范围的非常的充分理由。

在表单中调用Javascript函数'不是函数'

1 个答案: