Javascript从div位置获取单选按钮值答案

【问题标题】：Javascript get radio button values form div positionsJavascript从div位置获取单选按钮值
【发布时间】：2016-12-23 18:18:01
【问题描述】：

好的，我正在尝试创建测验应用程序，我已经花了 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>

【问题讨论】：

标签： javascript html

【解决方案1】：

这可以满足您的要求。您可以简单地在下一个按钮上添加一个新功能。签出sn-p

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>

【讨论】：

【解决方案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);
}

【讨论】：

thx 寻求帮助，它的工作原理与上面类似，但你知道是否可以只检查一次，这样每次用户单击单选按钮 1 时都会执行检查答案，这没什么用，你可以找到只需单击每个单选按钮即可获得答案。有没有办法在单击下一个按钮之前执行一次？
您可以改为在start 的开头调用checkAnswer。您只需要在第一次单击开始按钮时不调用它（使用您当前的代码，您可以检查是否有任何测验按钮。）
if (document.getElementsByName('quiz').length != 0) { checkAnswer(); }

【解决方案3】：

新元素

document.getElementsByName('quiz');

使用appendChild()动态添加，因此 document.getElementsByName 不会检测到它。你可以添加一个onclick 事件

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

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++;

}

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

【讨论】：

这很好用，谢谢，但现在的问题是每次单击单选按钮时都会执行 checkAnswer 函数，我只需要检查一次，这可能吗？还是我在这里完全错误的方法？
@Energizem 您可以在每次更新问题列表时使用 checkAnswer 函数检查最后一个答案是否正确，您也可以使用它来保持正确答案的计数器
@user2314737 你提到的点“document.getElementsByName('quiz'); 是用 appendChild() 动态添加的，所以它不会被 document.getElementsByName 检测到。”是不正确的。它会更新为 getElements 将获得当前列表，而不是我希望的 querySelector。