如何使用 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);
}
}
}

Answer 1

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

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

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>