Question

我在空闲时间开始使用JavaScript编写测验。我目前的代码是https://codepen.io/kennycrippen/pen/JZMyPw

我的问题涉及JS的第46至70行：

// loop through the radio buttons for question 1
var radio = document.getElementsByClassName('radio-0');
for (r = 0; r < radio.length; r++) {
radio[r].addEventListener('change', function() {
    console.log(this.value);
    if(this.value != allQuestions[0].correctAnswer) {
        alert('Incorrect');
    } else {
        alert('Correct');
    }
});
}

// loop through the radio buttons for question 2
var radio = document.getElementsByClassName('radio-1');
for (r = 0; r < radio.length; r++) {
radio[r].addEventListener('change', function() {
    console.log(this.value);
    if(this.value != allQuestions[1].correctAnswer) {
        alert('Incorrect');
    } else {
        alert('Correct');
    }
});
}

这两个循环基本上是一样的。为了保持我的代码DRY，将这些循环合并为一个的最佳方法是什么？我整天都在试验，但是有点像路障。谢谢！

Answer 1

你走了。我试图保持您的HTML完好无损，虽然一些更改可能会使它更容易。您可以使用data-attr代替将qstn no附加到Id名称。

希望它有所帮助。

＆＃13;

// Quiz Questions Object
var allQuestions = [{
    question: "Who is Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer: 'David Cameron'
  },
  {
    question: "Who is President of the United States?",
    choices: ["Barack Obama", "Ted Cruz", "Donald Trump", "Margaret Thatcher"],
    correctAnswer: 'Donald Trump'
  }
];


// Loop throught the allQuestions object
for (i = 0; i < allQuestions.length; i++) {
  // get the question and output to the document
  var question = allQuestions[i].question;
  var choices = allQuestions[i].choices;
  var correctAnswer = allQuestions[i].correctAnswer;
  var questionHTML = document.createElement('div');
  questionHTML.innerHTML = question;
  questionHTML.className = 'question-' + i;

  document.getElementById('questions-' + i).appendChild(questionHTML);

  // get the choices and output to the document
  for (j = 0; j < choices.length; j++) {
    var div = document.createElement('div');
    div.className = 'choice';
    div.innerHTML = '<input class="radioclass" type="radio" name="radio" value="' + choices[j] + '" id="' + choices[j].replace(/\s+/g, '-').toLowerCase() + '">' + '<label for="' + choices[j].replace(/\s+/g, '-').toLowerCase() + '">' + choices[j] + '</label>';

    document.getElementById('questions-' + i).appendChild(div);
  }

  // add the next question button
  var nextButton = document.createElement('button');
  nextButton.innerHTML = 'Next';
  nextButton.className = 'question-' + i + '-next';

  document.getElementById('questions-' + i).appendChild(nextButton);

}

// loop through the radio buttons for question 1
var radio = document.getElementsByClassName('radioclass');
for (r = 0; r < radio.length; r++) {
  radio[r].addEventListener('change', function() {
    var parentQuestionId = this.parentNode.parentNode.id.replace('questions-', '');
    console.log("parentQuestionId:", parentQuestionId);
    console.log(this.value);
    if (this.value != allQuestions[parentQuestionId].correctAnswer) {
      alert('Incorrect');
    } else {
      alert('Correct');
    }
  });
}

＆＃13;

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A Fun JS Quiz Title</title>
</head>

<body>
  <div id="questions-0"></div>
  <div id="questions-1"></div>
</body>

</html>

＆＃13;

Answer 2

将所有类似的代码放在命名函数中。

function setup_radios(radioClass, correctAnswer) {
  var radio = document.getElementsByClassName(radioClass);
  for (r = 0; r < radio.length; r++) {
    radio[r].addEventListener('change', function() {
      console.log(this.value);
      if (this.value != correctAnswer) {
        alert('Incorrect');
      } else {
        alert('Correct');
      }
    });
  }
}

allQuestions.forEach((q, i) => setup_radios("radio-" + i, q.correctAnswer));

使用一个JavaScript循环将单选按钮值与对象进行比较

2 个答案: