尝试使用 forEach 函数创建单选和标签元素

Question

我现在正在创建一个测验应用程序。

现在我正处于为数组的每个值创建单选和标签元素的阶段，但我显然没有做正确的事情，因为当我单击按钮调用单击事件时它不起作用，没有单选按钮或标签附加到选定的 div。

非常感谢您的帮助。

var dude = [{
  question: "What is dudes's favourte color?",
  choices: ["blue", "yellow", "red", "green"],
  answer: 0
}, {
  question: "What is dudes's favourte movie?",
  choices: ["Scarface", "The Terminator", "Shawshank Redemption", "The Dark Knight"],
  answer: 3
}, {
  question: "What was dudes's first ever job role?",
  choices: ["Cleaner", "Store Assistant", "Sales", "Admin"],
  answer: 1
}]

var currentQuestion = 0;
var questionNumber = 1;

dude[currentQuestion].choices.forEach(function(value) {
  var radio = document.createElement("input");
  var label = document.createElement("label");
  radio.setAttribute("type", "radio");
  radio.setAttribute("name", "answer");
  radio.setAtrribute("value", value);
  label.setAtrribute("for", value);
  quizSectionDiv.appendChild(radio);
  quizSectionDiv.appendChild(label);
})

for each 方法位于一个点击事件中，该事件适用于它所包含的其他代码行

Answer 1

没有错别字：

var dude = [
  {question: "What is dudes's favourte color?",choices: ["blue", "yellow", "red", "green"],answer: 0}
];
   
  let quizSectionDiv = document.querySelector('div#quizSectionDiv');

  var currentQuestion = 0;
  var questionNumber  = 1;

  dude[currentQuestion].choices.forEach(function(value){
    var radio = document.createElement("input");
    var label = document.createElement("label");
    radio.setAttribute("type", "radio");
    radio.setAttribute("name", "answer");
    radio.setAttribute("value", value); // typo here (fixed)

    /*
      for -> ID
    */
    //WRONG label.setAtrribute("for", value);
    /* So */
    let radioID = 'question-'+currentQuestion;
    radio.setAttribute('id', radioID) ;
    label.setAttribute("for", radioID); // typo here (fixed)
    label.innerHTML = value;

    quizSectionDiv.appendChild(radio);
    quizSectionDiv.appendChild(label);
  })

<div id="quizSectionDiv"></div>

当你遇到这样的问题，而你还没有调试器时，你可以对你的代码进行 cmets 和 ex-cmets，直到找到问题所在。

开始于：

var dude = [
  {question: "What is dudes's favourte color?",choices: ["blue", "yellow", "red", "green"],answer: 0 }
	];
 
 let currentQuestion = 0 ;
 dude[currentQuestion].choices.forEach(function(value){
 console.log("value",value); // to check the value and the loop
//var radio = document.createElement("input");
//var label = document.createElement("label");
//radio.setAttribute("type", "radio");
//radio.setAttribute("name", "answer");
//radio.setAtrribute("value", value);
//label.setAtrribute("for", value);
//quizSectionDiv.appendChild(radio);
//quizSectionDiv.appendChild(label);
})

.as-console-wrapper{max-height:100%!important;top:0;}

前评论：

var dude = [
  {question: "What is dudes's favourte color?",choices: ["blue", "yellow", "red", "green"],answer: 0 }
	];
 
 let currentQuestion = 0 ;
 dude[currentQuestion].choices.forEach(function(value){
 console.log("value",value); // to check the value and the loop
var radio = document.createElement("input");
var label = document.createElement("label");
radio.setAttribute("type", "radio");
//radio.setAttribute("name", "answer");
//radio.setAtrribute("value", value);
//label.setAtrribute("for", value);
//quizSectionDiv.appendChild(radio);
//quizSectionDiv.appendChild(label);
})

.as-console-wrapper{max-height:100%!important;top:0;}

直到：

var dude = [
  {question: "What is dudes's favourte color?",choices: ["blue", "yellow", "red", "green"],answer: 0 }
	];
 
 let currentQuestion = 0 ;
 dude[currentQuestion].choices.forEach(function(value){
 console.log("value",value); // to check the value and the loop
var radio = document.createElement("input");
var label = document.createElement("label");
radio.setAttribute("type", "radio");
radio.setAttribute("name", "answer");
radio.setAtrribute("value", value); // HERE
//label.setAtrribute("for", value);
//quizSectionDiv.appendChild(radio);
//quizSectionDiv.appendChild(label);
})

.as-console-wrapper{max-height:100%!important;top:0;}

/****


   WHEN YOU RUN THIS CODE SNIPPET, AN ERROR HAPPENS 
   
   AS EXPECTED
   ===========

   (READ THE ANSWER PLEASE)

  *****/

前注释标记为“HERE”的行，循环停止 => 你发现一个错误

但请记住：总是至少存在两个问题。所以修复这个，然后继续寻找下一个（在下一行）。