创建Pass Fail输入函数

Question

我正在创建一个测试表单。我已经创建了一个表单，其中包含要测试的步骤列表。

而不是列表上的每个项目都需要:

<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>

所有这些都是创建一个文本框，这不是我想要的。我也不确定是否onload是正确的

Answer 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);
    });
});

现场演示