如何更新从函数返回的变量值

开发者新

这是我的 javascript 测验代码:

"use strict"
const questions = [
  {
    question: "whats the full form of HTML",
    answers: {
      a: "Hello Text My Language",
      b: "Hyper text Main Language",
      c: "Hyper Text Markup Language",
      d: "Hi There My Luck",
    },
    correctAnswer:"ent-c",
  },
  {
    question: "whats the full form of CSS",
    answers: {
      a: "Cascading Style Sheet",
      b: "City Site Section",
      c: "Cyber Section Stand",
      d: "CycleStand Section",
    },
    correctAnswer:"ent-a",
  },
  {
    question: "whats the full form of JSON",
    answers: {
      a: "Jest Oriented Note",
      b: "JavaScript Object Notation",
      c: "Javascript Organised Node",
      d: "Joomla Of Node",
    },
    correctAnswer:"ent-b",
  },
  {
    question: "whats the full form of SQL",
    answers: {
      a: "Super Query Language",
      b: "Sorted Queue Line",
      c: "Superior Query Language",
      d: "Structured Query Language",
    },
    correctAnswer:"ent-d",
  },
];

let quest = document.querySelector('.question');
let quizLIst = document.querySelector('.quiz');
const btn = document.querySelector('.submitBtn');
const scoreDiv = document.querySelector('.scoreCard');
let currentQuestion = 0;
let score=0;
const loadQuestion = () =>{
    quest.innerText="";
    quizLIst.innerHTML="";
    console.log(questions[currentQuestion].question);
    quest.innerText = questions[currentQuestion].question;
    const ansEntries = Object.entries(questions[currentQuestion].answers);
    for (const [getQ, getA] of ansEntries) {
        quizLIst.innerHTML += `
        <li><input type="radio" class="ansOptions" id="ent-${getQ}" name="ans" value="${getA}"/><label for="${getA}">${getA}</label></</li>
        `;
    }
}
loadQuestion();

const allAnss = document.querySelectorAll('.ansOptions');
let getCheckedAnswer = () =>{
    let answer="";
    allAnss.forEach((currAns) =>{
        if(currAns.checked){
            answer = currAns.id;   
        }
    });
    return answer;
}

btn.addEventListener('click', ()=> {
   let checkedAnswer =  getCheckedAnswer();
    console.log("checked answer is ", checkedAnswer);
    if(checkedAnswer === questions[currentQuestion].correctAnswer){
        console.log("right");   
        score++;
    } 
    else{
        console.log("wrong");
    }
    currentQuestion++;
    
    if(currentQuestion <= questions.length){
        loadQuestion();
    }
})

但不知何故,checkedAnswer 变量没有得到更新。在第一个问题之后,checkedAnswer 值没有变空,因此我的下一个答案被第一个答案困住了。我在哪里可以清空代码中的 checkedAnswer 值,我尝试这样做,但似乎没有任何效果

高瑟姆·拉吉

您需要获取包含在.ansOptions. 所以你需要getCheckedAnswer()为每个问题更新,因为allAnss它仍然包含第一个问题选项中的旧 NodeList。

"use strict"
const questions = [
  {
    question: "whats the full form of HTML",
    answers: {
      a: "Hello Text My Language",
      b: "Hyper text Main Language",
      c: "Hyper Text Markup Language",
      d: "Hi There My Luck",
    },
    correctAnswer:"ent-c",
  },
  {
    question: "whats the full form of CSS",
    answers: {
      a: "Cascading Style Sheet",
      b: "City Site Section",
      c: "Cyber Section Stand",
      d: "CycleStand Section",
    },
    correctAnswer:"ent-a",
  },
  {
    question: "whats the full form of JSON",
    answers: {
      a: "Jest Oriented Note",
      b: "JavaScript Object Notation",
      c: "Javascript Organised Node",
      d: "Joomla Of Node",
    },
    correctAnswer:"ent-b",
  },
  {
    question: "whats the full form of SQL",
    answers: {
      a: "Super Query Language",
      b: "Sorted Queue Line",
      c: "Superior Query Language",
      d: "Structured Query Language",
    },
    correctAnswer:"ent-d",
  },
];

let quest = document.querySelector('.question');
let quizLIst = document.querySelector('.quiz');
const btn = document.querySelector('.submitBtn');
const scoreDiv = document.querySelector('.scoreCard');
let currentQuestion = 0;
let score=0;
const loadQuestion = () =>{
    quest.innerText="";
    quizLIst.innerHTML="";
    console.log(questions[currentQuestion].question);
    quest.innerText = questions[currentQuestion].question;
    const ansEntries = Object.entries(questions[currentQuestion].answers);
    for (const [getQ, getA] of ansEntries) {
        quizLIst.innerHTML += `
        <li><input type="radio" class="ansOptions" id="ent-${getQ}" name="ans" value="${getA}"/><label for="${getA}">${getA}</label></</li>
        `;
    }
}
loadQuestion();

let getCheckedAnswer = () =>{
    const allAnss = document.querySelectorAll('.ansOptions')
    let answer="";
    allAnss.forEach((currAns) =>{
        if(currAns.checked){
            answer = currAns.id;   
        }
    });
    return answer;
}

btn.addEventListener('click', ()=> {
   let checkedAnswer =  getCheckedAnswer();
    if(checkedAnswer === questions[currentQuestion].correctAnswer){
        console.log("right");   
        ++score;
    } else {
        console.log("wrong");
    }
    currentQuestion++;
    
    if(currentQuestion < questions.length){
        loadQuestion();
    }    
    document.querySelector('.scoreCard').innerText = 'Your score is ' + score + '.';
})
<div class="scoreCard"></div>

<div class="question"></div>
<div class="quiz"></div>
<button class="submitBtn">answer</button>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章