Question

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

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

非常感谢您的帮助。

＆＃13;

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);
})

＆＃13;

每个方法都位于click事件中，该事件适用于其拥有的其他代码行

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>

当您遇到这样的问题，并且您没有调试器时，您可以对代码进行注释和预注释，直到找到问题发生的位置。

开始于：

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”的行进行评论，loop stop =＆gt;你发现错误

但请记住：总有至少两个问题。所以解决这个问题，然后继续找到下一个（在下一行）。

尝试使用forEach函数创建radio和label元素

1 个答案: