在HTML中,使用Javascript,创建新的单选按钮及其文本? [英] In HTML, with Javascript, create new radio button and its text?
问题描述
我希望在选中表单(表单1)的是单选按钮时,会出现一个新表单(表单2),其中包含两个单选按钮及其文本是和否。在form1的Yes按钮中有一个onclick事件,我设法使这个新表单出现,并带有两个单选按钮,但我不能让他们的文本出现。由于单选按钮没有innerHTML,我尝试将文本以纯文本的形式添加为标签,但它不起作用。
这是语法还是逻辑问题(不可能与按钮同时创建文本)?感谢您的帮助。
I want that when the "Yes" radio button of a form (form1) is checked, a new form (form2) appears, with two radio buttons and their text "Yes" and "No". With an event "onclick" in the "Yes" button of the form1, I manage to make the new form appear, with the two radio buttons, but I cannot make their text appear. Since radio buttons do not have "innerHTML", I try to add the text either as plain text, either as "label", but it is not working. Is it a problem in the syntax or in the logic (not possible to create text at the same time as the button)? Thank you for your help.
在我的HTML主体中,我有这个:
In my HTML body I have this:
<form id="form1">
<input type="radio" id= "form1_no" value="no" checked>
<label for = "form1_no" >No</label>
<input type="radio" id= "form1_yes" value="yes" onClick= exam()>
<label for = "form2_yes" >Yes</label>
</form>
函数exam()是:
The function exam() is:
<script type='application/javascript'>
function exam() {
var inputno = document.createElement("input");
inputno.type = "radio";
inputno.id = "form2_no";
inputno.value = "no";
inputno.onclick = function () {alert("I select No in Form 2")};
document.getElementById("form2").appendChild(inputno); // this is working
var inputyes = document.createElement("input");
inputyes.type = "radio";
inputyes.id = "form2_yes";
inputyes.value ="yes";
inputyes.onclick = function () {alert("I select Yes in Form 2")};
document.getElementById("form2").appendChild(inputyes); // this is working
// now, the code that is not working:
// 1st tentative (adding "Yes" and "No" as plain text after their radio button):
var textno = "No";
document.getElementById("form2_no").appendChild(textno);
var textyes = "Yes";
document.getElementById("form2_yes").appendChild(textyes);
// 2nd tentative (adding "Yes" and "No" as labels to their radio button):
var labelno = document.createElement("label");
labelno.for="form2_no";
labelno.innerHTML = "No";
document.getElementById("form2_no").appendChild(labelno);
var labelyes = document.createElement("label");
labelyes.for="form2_yes";
labelyes.innerHTML = "Yes";
document.getElementById("form2_yes").appendChild(labelyes);
}
</script>
推荐答案
类似这样的工作可以创建按钮和标签。
Something like this works to create a button and label.
<div id="radio_home"></div>
<script>
var radio_home = document.getElementById("radio_home");
function makeRadioButton(name, value, text) {
var label = document.createElement("label");
var radio = document.createElement("input");
radio.type = "radio";
radio.name = name;
radio.value = value;
label.appendChild(radio);
label.appendChild(document.createTextNode(text));
return label;
}
var yes_button = makeRadioButton("yesbutton", "yes", "Oh yea! do it!");
radio_home.appendChild(yes_button);
</script>
这篇关于在HTML中,使用Javascript,创建新的单选按钮及其文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!