javascript - 如何使用 JS 将可见文本动态应用到输入单选按钮

Question

我目前正在尝试向每个无线电输入字段添加文本。单选按钮看起来很好。相应地设置该值。但是我看不到已经设置好的文字内容。这是我的预期结果。提前致谢。

HTML

<form id="answers"></form>

JavaScript

var quiz = {

  // Store questions
  questions: [
    {
      question: "What month do we celebrate the birth of Jesus?",
      answers: ["March", "September","Novemeber", "Decemeber"],
      correctAnswer: "December"
    }
  ]
}

var view = {
      showAnswers: function(){

          var answerTotal = quiz.questions[0].answers.length;

          // Loop to create radio buttons 
          for(var i = 0; i < answerTotal; i++ ){
            var answersContainer = document.getElementById('answers');
            var answersInput = document.createElement('input');
            answersInput.setAttribute('type', 'radio');
            answersInput.textContent = quiz.questions[0].answers[i];
            answersInput.value = quiz.questions[0].answers[i];
            answersContainer.appendChild(answersInput);
          }

      }

}

标签： javascripthtml

Answer 1

radioButton 的 value 属性不是可见的，而是它旁边的文本。

这是添加文本的一种方式。

var quiz = {

  // Store questions
  questions: [
    {
      question: "What month do we celebrate the birth of Jesus?",
      answers: ["March", "September","Novemeber", "Decemeber"],
      correctAnswer: "December"
    }
  ]
}

var view = {
      showAnswers: function(){

          var answerTotal = quiz.questions[0].answers.length;

          for(var i = 0; i < answerTotal; i++ ){
            var answersContainer = document.getElementById('answers');
            var answersInput = document.createElement('input');
            answersInput.setAttribute('type', 'radio');
            answersInput.setAttribute('name', 'question');
            answersInput.textContent = quiz.questions[0].answers[i];
            answersInput.value = quiz.questions[0].answers[i];
            answersContainer.appendChild(answersInput);
            answersContainer.innerHTML += quiz.questions[0].answers[i]+'</br>';
          }

      }

}

view.showAnswers();

<form id="answers"></form>