创建通过失败输入功能

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

Live Demo