0

テストフォームを作成しています。テストする手順のリストを含むフォームを作成しました。

必要なリストのすべてのアイテムの代わりに：

<input type="radio" name="step1">Pass<input type="radio" name="step1">Fail

関数を作成したかったので、毎回呼び出すだけで作成できました。これはこれまでの私の機能です：

function createPassFail(name)
{
    var Pass = document.createElement('input');
    Pass.type = "radio";
    Pass.name = name;
    document.getElementById("Pass").innerHTML = "Pass";

    var Fail = document.createElement('input');
    Fail.type = "radio";
    Fail.name = name;
    document.getElementById("Fail").innerHTML = "Fail";
}

そして、私はそれを次のように呼びます：

<li>Step One: Turn the TV On
<input id = "step1" onload="createPassFail(this.value)">
</li>

これは、私が意図していたものではないテキストボックスを作成することだけです。オンロードが正しいかどうかもわかりません。

4

1 に答える 1

1

関数にを渡す代わりにvalue、idを渡す必要があります。

onload="createPassFail(this.id)"
//                          ^^

私はあなたのイベントはあなたが使うべきイベントハンドラーではonblurないと思うので、そうあるべきだと言います。onload私の提案を使用するか、テキストボックスの横にボタンを設定して（を使用してonclick）クリックすると、必要な操作を実行できます。

さらに、合格要素または不合格要素をHTMLに挿入していません。これを試して：

document.body.appendChild(Pass);
document.body.appendChild(Fail);

これにより、新しく作成された要素がbody要素の最後に直接挿入されます。それらをその中の要素の子にしたい場合は、適切な方法で要素にアクセスする必要があります。たとえば、getElementById：

document.getElementById( element ).appendChild(Pass); // do the same for Fail

ただし、これはすべてjQueryを使用して簡単に実行できます。

$(document).ready(function() {
    function createPassFail(name)
    {
        $('body').append('<input type="radio" id="' + name + '">Pass');
        $('body').append('<input type="radio" id="' + name + '">Fail');
    }

    $('#step1').ready(function() {
        createPassFail(this.id);
    });
});

ライブデモ

于 2013-03-26T15:14:03.057 に答える