Question

好的，这是我试图创建测验应用程序，我花了8个多小时试图弄清楚什么是错的。我只是放弃了，所以如果可以，请帮助我。情况是我使用DOM创建无线电输入，你可以选择回答问题，每次你点击下一步，另一个问题显示在div标签，而前一个div标签被删除。我希望以一种方式存储结果，在完成所有问题之后，我将在警报窗口中通知用户或者有关正确答案的数量。问题是我无法找到我做错的事情。

answers = document.getElementsByName('quiz');
if(answers[1].checked){
       alert("gj");
    }

这在浏览器控制台中工作正常，如果用户选择单选按钮编号1，它会提醒我。但是当我把它放在我的脚本中时它什么也没做。我猜问题是在我如何创建整个start（）函数的某个地方，但我无法绕过它。

完整代码：动态测验

var allQuestions = [{
    question: "Question1?", 
    choices: ["Answer1", "Answer2", "Answer3", "Answer4"],
    CorrectAnswer:0},
    {
    question: "Question2?", 
    choices: ["Answer6", "Answer7"],
    CorrectAnswer:0}
    ];

var currentQuestion=0;
var currentAnswer=0;
var correctAnswer=0;
var answers;
var div2;

function createDiv(){
    var div=document.createElement("div");
    div2=document.getElementById("content").appendChild(div);
}

function createQuestion(question){
    var q = document.createElement('p');
    q.innerHTML=question;
    div2.appendChild(q);
}

function createRadio(id){
    var radio = document.createElement('input');
    radio.setAttribute("type","radio");
    radio.setAttribute("name","quiz");
    radio.setAttribute("id",id);
    div2.appendChild(radio);
}

function createLabel(id,text){
    var lab = document.createElement('label'); 
    lab.setAttribute("id",id);
    lab.setAttribute("for",id);

    lab.innerHTML=text;
    div2.appendChild(lab);
}

function checkAnswer(){
answers = document.getElementsByName('quiz');
if(answers[1].checked){
       alert("gj");
    }
}

function remover(){ //removes content for next question

  var myNode = document.getElementById("content");
  while (myNode.firstChild) {
    myNode.removeChild(myNode.firstChild);
  }
}

function start(){ 

remover();
createDiv();
createQuestion(allQuestions[currentQuestion].question); 

//create all radio answers for question in div
for (var i = 0; i<allQuestions[currentQuestion].choices.length;i++){
    createDiv();
    createRadio(allQuestions[currentQuestion].choices[i]);
    createLabel(allQuestions[currentQuestion].choices[i],allQuestions[currentQuestion].choices[i]);
}

checkAnswer();

currentQuestion++;

if (currentQuestion === allQuestions.length){ //just sto stop from going infinite
currentQuestion=allQuestions.length-1; }
}

</script>
</head>
<body onload=start()>

<div id="main">
<div id="content"></div> 
</div>
<div id="butn">
<input type="submit" value="Start" onClick="start()">
</body>
</html>

Answer 1

新元素

document.getElementsByName('quiz');

是使用appendChild()动态添加的，因此不会被document.getElementsByName检测到。您可以添加onclick事件

radio.setAttribute("onclick","checkAnswer()");

＆＃13;

var allQuestions = [{
  question: "Question1 ?",
  choices: ["Answer1", "Answer2", "Answer3", "Answer4"],
  CorrectAnswer: "Answer3"
}, {
  question: "Question2 ?",
  choices: ["Answer6", "Answer7"],
  CorrectAnswer: "Answer6"
}];

var currentQuestion = 0;
var currentAnswer = 0;
var correctAnswer = 0;
var answers;
var div2;

function createDiv() {
  var div = document.createElement("div");
  div2 = document.getElementById("content").appendChild(div);
}

function createQuestion(question) {
  var q = document.createElement('p');
  q.innerHTML = question;
  div2.appendChild(q);
}

function createRadio(id) {
  var radio = document.createElement('input');
  radio.setAttribute("type", "radio");
  radio.setAttribute("name", "quiz");
  radio.setAttribute("id", id);
  radio.setAttribute("onclick", "checkAnswer(id)");
  div2.appendChild(radio);
}

function createLabel(id, text) {
  var lab = document.createElement('label');
  lab.setAttribute("id", id);
  lab.setAttribute("for", id);
  lab.innerHTML = text;
  div2.appendChild(lab);
}

function checkAnswer(answer) {
  // do something with currentAnswer
  CorrectAnswer = allQuestions[currentQuestion - 1].CorrectAnswer;
  console.log("Current question: ", currentQuestion - 1);
  console.log("Current answer: ", answer);
  console.log("Correct answer: ", CorrectAnswer);
  if (answer == CorrectAnswer) {
    console.log("correct");
  }
}


function remover() { //removes content for next question

  var myNode = document.getElementById("content");
  while (myNode.firstChild) {
    myNode.removeChild(myNode.firstChild);
  }
}

function start() {
  // when clicking start button check answer

  remover();
  createDiv();
  createQuestion(allQuestions[currentQuestion].question);

  //create all radio answers for question in div
  for (var i = 0; i < allQuestions[currentQuestion].choices.length; i++) {
    createDiv();
    createRadio(allQuestions[currentQuestion].choices[i]);
    createLabel(allQuestions[currentQuestion].choices[i], allQuestions[currentQuestion].choices[i]);
  }

  currentQuestion++;

}

＆＃13;

<div id="main">
  <div id="content"></div>
</div>
<div id="butn">
  <input type="submit" value="Start" onClick="start()">

＆＃13;

Answer 2

在启动函数中，checkAnswer在呈现问题后立即执行，此时不会选中单选按钮。

如果您希望在单击单选按钮时执行checkAnswer，则可以在创建单选按钮时添加事件处理程序，并在此处调用checkAnswer而不是start函数。

function createRadio(id){
    var radio = document.createElement('input');
    radio.setAttribute("type","radio");
    radio.setAttribute("name","quiz");
    radio.setAttribute("id",id);
    radio.addEventListener("click", checkAnswer);
    div2.appendChild(radio);
}

Answer 3

这可以达到您的要求。您只需在下一个按钮上添加一个新功能即可。结帐片段

var allQuestions = [{
    question: "Question1?", 
    choices: ["Answer1", "Answer2", "Answer3", "Answer4"],
    CorrectAnswer:0},
    {
    question: "Question2?", 
    choices: ["Answer6", "Answer7"],
    CorrectAnswer:0}
    ];

var currentQuestion=0;
var currentAnswer=0;
var correctAnswer=0;
var answers;
var div2;

function createDiv(){
    var div=document.createElement("div");
    div2=document.getElementById("content").appendChild(div);
}

function createQuestion(question){
    var q = document.createElement('p');
    q.innerHTML=question;
    div2.appendChild(q);
}

function createRadio(id){
    var radio = document.createElement('input');
    radio.setAttribute("type","radio");
    radio.setAttribute("name","quiz");
    radio.setAttribute("id",id);
    div2.appendChild(radio);
}

function createLabel(id,text){
    var lab = document.createElement('label'); 
    lab.setAttribute("id",id);
    lab.setAttribute("for",id);

    lab.innerHTML=text;
    div2.appendChild(lab);
}

function checkAnswer(){
answers = document.getElementsByName('quiz');

if(answers[0].checked){
       alert("correct answer");
    }
  else{
  alert("wrong") ; 
  }
}

function remover(){ //removes content for next question

  var myNode = document.getElementById("content");
  while (myNode.firstChild) {
    myNode.removeChild(myNode.firstChild);
  }
}
function next(){ 
  checkAnswer();
  remover();
  start();
}
function start(){ 


createDiv();
createQuestion(allQuestions[currentQuestion].question); 

//create all radio answers for question in div
for (var i = 0; i<allQuestions[currentQuestion].choices.length;i++){
    createDiv();
    createRadio(allQuestions[currentQuestion].choices[i]);
    createLabel(allQuestions[currentQuestion].choices[i],allQuestions[currentQuestion].choices[i]);
}



currentQuestion++;

if (currentQuestion === allQuestions.length){ //just sto stop from going infinite
currentQuestion=allQuestions.length-1; }
}

<html>
  <head>
</head>
<body onload="start()">

<div id="main">
<div id="content"></div> 
</div>
<div id="butn">
<input type="submit" value="Start" onClick="next()">
</body>
</html>

Javascript从单位位置获取单选按钮值

3 个答案: