Question

我是JavaScript DOM的新手。我在www.quirksmode.org/dom/domform.html找到了一个教程。我重新编写了代码以满足我的需求，但是当我无法使用它时，我将此页面中的代码直接复制到测试页面中。 moreFields函数将运行onload，但不会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

您的问题（除了按照每个Lucas的答案不包括按钮上的监听器）是你有一个ID为“moreFields”的元素，所以如果你有一个像这样的监听器：

<input id="moreFields" ... onclick="moreFields();">

然后在侦听器中， moreFields 引用按钮本身而不是函数。因此，要么将名称或ID更改为不冲突（该按钮无论如何都不需要名称或ID），或者将该函数作为 window 的属性调用：

<input id="moreFields" ... onclick="window.moreFields();">

使用 addEventListener 或直接分配也可以解决问题：

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

Answer 3

这里有多个问题。

您正在使用无效的'转发\'，无法将字符串文字括在''或""中。
morefields按钮
由于您有一个标识为morefields

尝试

<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" value="Give me more fields!" onclick="moreFields()"/>
    <input type="submit" value="Send form" />

</form>

和

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;

演示：fiddle

Answer 4

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

您可以通过将现有的onload代码更改为此方式来实现：

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

我们等待添加onclick直到窗口加载，否则HTML按钮将不会加载到那时（还有DOMContentLoaded事件，但一次只有一件事......）。

您还可以在按钮元素上添加对moreFields的调用，但请注意您必须更改您的ID或其他内容，对于INLINE JavaScript（即，不在脚本标记或单独的脚本文件中），该元素将被公开作为使用其ID的变量，它将尝试调用元素“moreFields”（从而给出错误）而不是函数moreFields()。

<input type="button" id="moreFields1" onclick="moreFields()" value="Give me more fields!" />

（或者你可以像RobG一样提到并在窗口上显式调用moreFields。）

如何使用Javascript无限期地向表单添加字段？

4 个答案: