Question

我试图在JS中创建一个简单的测试。我有一个功能，可以创建4个单选按钮并将它们添加到html中。当我将其称为n次时，我只需将相同的4个单选按钮添加到div，当我尝试从第四个问题中选择一个答案时，例如它仍会从第一个div中选择答案/问题

＆＃13;

function getRandom(min, max) {
    return Math.random() * (max - min) + min;
}

function test_2() {

  var a = getRandom(0, 10) - 5;

  while (a == 0)
    a = getRandom(0, 10) - 5;

  var b = getRandom(0, 10) - 5;

  //create the div in which i add the radio buttons
  var div = document.createElement('div');
  div.setAttribute('class', 'parent');
  div.setAttribute('id', '2');

  document.body.appendChild(div);

  //create the radio button and set its attributes
  var radio1 = document.createElement('input');
  var label1 = document.createElement('label');
  label1.innerHTML = a * 4 + b;
  label1.setAttribute('for', 'radio1');
  radio1.setAttribute('type', 'radio');
  radio1.setAttribute('value', a * 4 + b);
  radio1.setAttribute('id', 'radio1');
  radio1.setAttribute('name', 'answ');
  radio1.innerHTML = a * 4 + b;

  //add it to the div
  div.appendChild(radio1);
  div.appendChild(label1);
}

test_2();

＆＃13;

Answer 1

每个问题的名称属性必须不同：

    <form>
    <!-- Question 01 -->
    <fieldset id="group1">
        <input type="radio" value="" name="group1">
        <input type="radio" value="" name="group1">
    </fieldset>

    <fieldset id="group2">
    <!-- Question 02 -->
        <input type="radio" value="" name="group2">
        <input type="radio" value="" name="group2">
        <input type="radio" value="" name="group2">
    </fieldset>
</form>

Answer 2

这可能是因为每个＆＃34;单选按钮包＆＃34;生成的test_2()具有相同的name属性值（answ）。一个快速的解决方案是将name作为参数发送到test2，以便您使用＃34;命名空间＆＃34;你的无线电按钮是这样的：

function test_2(name) {

  var a = getRandom(0, 10) - 5;

  ...

  radio1.setAttribute('name', name + '-answ');

  ...

}

这样，如果您在循环中调用此函数，则可以将索引作为name参数传入，并确保名称的唯一性。

与Javascript变量范围混淆

2 个答案: