i finish my first quiz app and just i need to put the score on screen, i use this function to do that
btn.addEventListener('click' , () => {
let answer = getSelected();
const quizCon = document.getElementById('quizContainer');
if ( answer){
if(answer === quizData[currentQuestion].correct){
scores++
};
}
currentQuestion++;
getSelected();
if (currentQuestion < quizData.length){
loadQuiz();
}else{
quizCon.innerText = `You score is ${scores}/${quizData.length}`
};
});
but when i test it console show me this message : Uncaught TypeError: quizCon is null
this is the full code :
/* This is the data of quiz */
quizData = [
{
Question : 'How fast can a cat run ? ',
a : '30mph',
b : '20mpn',
c : '10mph',
correct : 'c',
},
{
Question : 'How long can a house cat live ? ',
a : 'until 5 years',
b : 'until 10 years',
c : 'until 16 years',
correct : 'c',
},
{
Question : 'How fast can a dog run ? ',
a : '30mph',
b : '20 mph',
c : '15mph',
correct : 'b',
},
];
/* Some important variables */
const mainQuestion = document.getElementById('question');
const aText = document.getElementById('a-text');
const bText = document.getElementById('b-text');
const cText = document.getElementById('c-text');
let currentQuestion = 0;
let scores = 0;
const btn = document.getElementById('btn');
const answersEls = document.querySelectorAll('.answer');
const answers = undefined;
/* This function is important to show the questions in your screen */
loadQuiz()
function loadQuiz() {
deselect()
// to show main question
mainQuestion.innerText = quizData[currentQuestion].Question;
// to show options
aText.innerText = quizData[currentQuestion].a;
bText.innerText = quizData[currentQuestion].b;
cText.innerText = quizData[currentQuestion].c;
};
/* This function is for change the content with evrey click on submit */
btn.addEventListener('click' , () => {
let answer = getSelected();
const quizCon = document.getElementById('quizContainer');
if ( answer){
if(answer === quizData[currentQuestion].correct){
scores++
};
}
currentQuestion++;
getSelected();
if (currentQuestion < quizData.length){
loadQuiz();
}else{
quizCon.innerText = `You score is ${scores}/${quizData.length}`
};
});
/* This functions for deselect radio options and get options id*/
function deselect() {
answersEls.forEach((answerEl) => {
answerEl.checked = false;
});
};
function getSelected(){
var answer = undefined;
answersEls.forEach((answerEl) => {
if(answerEl.checked){
answer = answerEl.id
}
});
return answer;
};
getSelected()
/* This function is for calulate the score */