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

1

ここには複数の問題があります。

  1. '無効なwithをエスケープして\'います。文字列リテラルは 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 イベントもありますが、一度に 1 つずつ...)。

ボタン要素に moreFields への呼び出しを追加することもできますが、ID を変更する必要があることに注意してください。INLINE JavaScript (つまり、スクリプト タグや別のスクリプト ファイルではない) の場合、要素は変数として公開されます。その ID を使用して、 function の代わりに要素「moreFields」を呼び出そうとします (したがって、エラーが発生します) moreFields()。

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

(または、RobG が言及しているように実行して、ウィンドウで moreFields を明示的に呼び出すことができます。)

于 2013-06-13T03:41:11.817 に答える