I am currently working on an online quiz using JavaScript, HTML and CSS. I am pretty happy with it this far but am having an issue trying to add a user score to the game. I am lookig for the score to increase put 5 points for every question the user gets a correct answer for. I have tried a few different ways of doing it but seem to keep coming up with the same issue, the score is not increasing. This is my latest attempt at it, can anyone give me a bit of advice please?
const scorePanelElement = document.getElementById('score-panel');
const userScoreElement = document.getElementById('user-score');
const scoreCounterElemet = document.getElementById('score-counter');
const questionCounterElement = document.getElementById('question-counter');
document.addEventListener("DOMContentLoaded", startButton)
let shuffledQuestions, currentQuestionIndex;
let questionCounter = 1;
let scoreCounter = 5;
let score = 5;
let selectedAnswer;
let maxQuestions = 10;
startButton.addEventListener("click", startGame)
nextButtonElement.addEventListener('click', () => {
currentQuestionIndex++
nextQuestion()
userScore()
})
console.log(questions)
function startGame() {
console.log('StartGame');
startButton.classList.add('hidden');
shuffledQuestions = questions.sort(() => Math.random() - .5);
currentQuestionIndex = 0;
questionPanelElement.classList.remove('hidden');
questionCounter = 0;
scoreCounter = 0;
callQuestions();
}
function checkAnswer(e) {
selectedAnswer = e.target
const correct = selectedAnswer.dataset.correct;
Array.from(answerButtonsElement.children).forEach(button => {
answerChoice(button, button.dataset.correct);
})
if (shuffledQuestions.length > currentQuestionIndex + 1) {
callQuestions;
} else {
nextButtonElement.classList.add('hidden');
questionPanelElement.classList.add('hidden');
usernameElement.classList.remove('hidden');
}
answerChoice;
}
function userScore() {
if (selectedAnswer === 'correct') {
scoreCounter++;
scoreCounterElemet.innerText = + score;
}
console.log('Increase Score')
}```
I believe the issue here might be
function userScore() {
if (selectedAnswer === 'correct') {
// increases scoreCounter by one
scoreCounter++;
// sets the element text into something that doesn't really make sense
scoreCounterElemet.innerText = + score;
}
console.log('Increase Score')
}
Instead, try something like this
function userScore() {
if (selectedAnswer === 'correct') {
scoreCounter = scoreCounter + 5; // increases scoreCounter by 5
// sets the element text to the current score
scoreCounterElemet.innerText = scoreCounter;
}
console.log('Increase Score')
}