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

您应该传递id：

，而不是将value传递给函数

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

我说你的活动应该是onblur因为我不认为onload是你应该使用的事件处理程序。您可以使用我的建议，也可以在文本框旁边设置一个按钮，单击该按钮（使用onclick）可以满足您的需求。

此外，您尚未将pass或fail元素插入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);
    });
});

Live Demo

创建通过失败输入功能

1 个答案: