0

我是 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>
4

4 回答 4

2

此代码不起作用，因为函数 moreFields() 未附加到按钮 #moreFields 单击事件。

只需将第 19 行更改为

window.onload = function(){
    document.getElementById('moreFields').onclick = function(){ moreFields(); }
    moreFields();
}
于 2013-06-13T03:34:56.377 回答
1

您的问题（除了根据卢卡斯的回答不包括按钮上的侦听器之外）是您有一个 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();
}
于 2013-06-13T03:36:10.530 回答
1

您在这里有多个问题。

  1. 您正在转义无效的'，\'字符串文字必须用 in''或括起来""。
  2. morefields按钮没有点击处理程序
  3. 由于您有一个带有 id 的函数和按钮，因此存在范围问题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;

演示：小提琴

于 2013-06-13T03:39:13.543 回答
0

您需要将 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。）

于 2013-06-13T03:41:11.817 回答