Question

如何从数组中得出答案并将其添加到单选按钮？

let test = document.querySelector('#test');

let questions = [{
    text: 'Question 1',
    right: 0,
    answers: ['answer1', 'answer2', 'answer3']
  },
  {
    text: 'Question 2',
    right: 1,
    answers: ['answer1', 'answer2', 'answer3']
  },
  {
    text: 'Question 3',
    right: 2,
    answers: ['answer1', 'answer2', 'answer3']
  },
];

let i = 1;

for (let question of questions) {
  let div = document.createElement('div');
  test.appendChild(div);

  let p = document.createElement('p');
  p.innerHTML = question.text;
  div.appendChild(p);

  let form = document.createElement('form');
  test.appendChild(form);
  form.dataset.right = question.right;

  let j = 0;
  for (let answer of question.answers) {
    let input = document.createElement('input');
    input.type = 'radio';
    input.name = i;
    input.dataset.answerNum = j++;
    form.appendChild(input);
  }
  i++;
}

let button = document.querySelector('#button');

button.addEventListener('click', function() {
  let forms = document.querySelectorAll('#test form');

  let counter = 0;

  for (let form of forms) {
    form.classList.remove('correct');
    form.classList.remove('incorrect');

    let inputs = form.querySelectorAll('input');

    for (let input of inputs) {
      if (input.checked) {
        if (input.dataset.answerNum == form.dataset.right) {
          form.classList.add('correct');
          counter++;
        } else {
          form.classList.add('incorrect');
        }
        break;
      }
    }
  }

  if ((counter > 0) || (counter < 2)) {
    alert(counter);
  }

});

.correct {
  border: 1px solid green;
}

.incorrect {
  border: 1px solid red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<div class="test-wrap">
  <div id="test"></div>
  <button id="button">Check</button>
</div>

<body>
  <script src="index.js"></script>
</body>

</html>

Answer 1

检查小提琴： https://jsfiddle.net/wz20xscp/1/

要为广播输入添加答案，我更新了代码。

var radioHtml = '<input type="radio" name="' + name + '"';
radioHtml += '/>' + answer;

var radioDiv = document.createElement('div');
radioDiv.innerHTML = radioHtml;
    form.appendChild(radioDiv);

Answer 2

您可以在循环的末尾添加form.append(answer)。

    for (let answer of question.answers) {
    let input = document.createElement('input');
    input.type = 'radio';
    input.name = i;
    //input.innerHTML = answer;
    input.dataset.answerNum = j++;
    form.appendChild(input);
    form.append(answer);
    }

let test = document.querySelector('#test');

let questions = [
    {
        text: 'Question 1',
        right: 0,
        answers: ['answer1', 'answer2', 'answer3']
    },
    {
        text: 'Question 2',
        right: 1,
        answers: ['answer1', 'answer2', 'answer3']
    },
    {
        text: 'Question 3',
        right: 2,
        answers: ['answer1', 'answer2', 'answer3']
    },
];

let i = 1;

for (let question of questions) {
    let div = document.createElement('div');
    test.appendChild(div);

    let p = document.createElement('p');
    p.innerHTML = question.text;
    div.appendChild(p);

    let form = document.createElement('form');
    test.appendChild(form);
    form.dataset.right = question.right;

    let j = 0;
    for (let answer of question.answers) {
        let input = document.createElement('input');
        input.type = 'radio';
        input.name = i;
        //input.innerHTML = answer;
        input.dataset.answerNum = j++;
        form.appendChild(input);
        form.append(answer);
    }
    i++;
}

let button = document.querySelector('#button');

button.addEventListener('click', function () {
    let forms = document.querySelectorAll('#test form');

    let counter = 0;

    for (let form of forms) {
        form.classList.remove('correct');
        form.classList.remove('incorrect');

        let inputs = form.querySelectorAll('input');

        for (let input of inputs) {
            if (input.checked) {
            	console.log(input.dataset);
                if (input.dataset.answerNum == form.dataset.right) {
                    form.classList.add('correct');
                    counter++;
                } else {
                    form.classList.add('incorrect');
                }
                break;
            }
        }
    }

    if ((counter > 0) || (counter < 2)) {
        alert(counter);
    }

});

.correct {
    border: 1px solid green;
}

.incorrect {
    border: 1px solid red;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<div class="test-wrap">
    <div id="test"></div>
    <button id="button">Check</button>
</div>

<body>
    <script src="index.js"></script>
</body>

</html>

如何为单选按钮添加答案？

2 个答案: