javascript - 如何通过 javascript 为单选按钮赋予标题

Question

我试图给一个单选按钮一个标题，因为它是动态创建的，这怎么可能

这是我的代码

var i = 3; 
function textAreaCreate(){

var l = document.createElement("label");
l.innerHTML = "Option " + i;
document.getElementById("myForm").appendChild(l);

var r = document.createElement("input");
r.innerHTML = "Option " + i;
r.setAttribute("type", "radio");
r.setAttribute("Name", "CorrectAns");
document.getElementById("coreectOpt").appendChild(r);

i++;

}

和html代码

<div  id="coreectOpt"> //For radio button
</div>

<div class="form-group"  id="myForm"> //For label                                
</div>
 <a href="#" class="textAreaCreate" onclick="textAreaCreate()">Add More Options</a>

标签工作成功，但单选按钮不工作

我想要 C、D 等等，

Answer 1

目前，您分配的文本只是 Option 与数字连接。如果您想使用字母，可以使用 fromCharCode 将数字转换为字母。

此外，要在单击标签时单击单选按钮，请为 label 的 for 属性分配一个唯一的字符串，并为单选按钮提供相同的值id。

另请注意，单选按钮没有 innerHTML 属性 - 不要尝试分配给它们。

let i = 3;
function textAreaCreate() {
  const letter = String.fromCharCode(i + 62);
  const labelString = "Option " + letter;
  const l = document.createElement("label");
  // Starts at character code 62, which is "A":
  l.textContent = labelString;
  l.setAttribute('for', letter);
  document.getElementById("myForm").appendChild(l);

  const r = document.createElement("input");
  r.id = letter;
  r.setAttribute("type", "radio");
  r.setAttribute("Name", "CorrectAns");
  document.getElementById("coreectOpt").appendChild(r);
  i++;
}

<div id="coreectOpt">
</div>
<div class="form-group" id="myForm">
</div>
<a href="#" class="textAreaCreate" onclick="textAreaCreate()">Add More Options</a>