我如何使用JavaScript不确定地向表单添加字段？

Question

我是JavaScript DOM的新手。我在www.quirksmode.org/dom/domform.html找到了一个教程。我重新编写了代码以满足我的需要，但是当我无法正常工作时，我将代码从该页面直接复制到了测试页面。 moreFields函数将在加载时运行，但不会在onclick上运行。 removeFields函数确实起作用。我已经在Firefox和Chromium中测试了代码。在本教程的Firefox中它可以工作，但即使我逐字复制它也不能。我什至尝试从教程中复制源代码。

<script type="text/javascript">
<!--

var counter = 0;

function moreFields() {
counter++;
var newFields = document.getElementById(\'readroot\').cloneNode(true);
newFields.id = \'\';
newFields.style.display = \'block\';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
    var theName = newField[i].name
    if (theName)
        newField[i].name = theName + counter;
}
var insertHere = document.getElementById(\'writeroot\');
insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = moreFields;

// -->
</script>

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

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

<input name="cd" value="title" />

<select name="rankingsel">
    <option>Rating</option>
    <option value="excellent">Excellent</option>
    <option value="good">Good</option>
    <option value="ok">OK</option>
    <option value="poor">Poor</option>
    <option value="bad">Bad</option>
</select><br /><br />

<textarea rows="5" cols="20" name="review">Short review</textarea>
<br />Radio buttons included to test them in Explorer:<br />
<input type="radio" name="something" value="test1" />Test 1<br />
<input type="radio" name="something" value="test2" />Test 2

</div>

<form method="post" action="/cgi-bin/show_params.cgi">

<span id="writeroot"></span>

<input type="button" id="moreFields" value="Give me more fields!" />
<input type="submit" value="Send form" />

</form> 

Answer 1

此代码不起作用，因为功能moreFields（）未附加到按钮#moreFields click事件。

只需将第19行更改为>

window.onload = function(){
    document.getElementById('moreFields').onclick = function(){ moreFields(); }
    moreFields();
}

Answer 2

您在这里有多个问题。

Answer 3

您的问题（除了根据Lucas的回答在按钮上不包含侦听器之外，您还具有一个ID为“ moreFields”的元素，因此，如果您有一个侦听器，例如：

Answer 4

您需要将moreFields（）函数作为onclick事件附加到按钮。