I have been trying to solve my issue for a while now, but have had no luck. My issue is that once I click to start game and then answer the first question I am then lead to the second question (as expected and as I wanted). After picking out an answer for the second question, the recursive function gets called again (as expected) which should bring me to the third question like it did with the second question, but instead it begins to skip questions and level++ adds on its own without clicking. This continues on..
JS
// VARIABLE LIBRARY
var timeLimitEl = document.querySelector('#time-limit')
var startGameEl = document.querySelector('.start-game')
var startButtonEl = document.querySelector('#start-button')
var questionTitle = document.querySelector('#question-title')
var questionBox = document.querySelector('.question-box')
var optionBox = document.querySelector('#option-box')
var option1 = document.querySelector('#option1')
var option2 = document.querySelector('#option2')
var option3 = document.querySelector('#option3')
var option4 = document.querySelector('#option4')
var timeLeft = 120
var score = timeLeft
var level = 0
// // TIMER
// const timer = () => {
// setInterval(() => {
// timeLeft--
// timeLimitEl.textContent = timeLeft
// console.log(timeLeft)
// }, 1000)
// }
// START BUTTON
startButtonEl.addEventListener('click', () => {
startGameEl.style.display = "none"
// timer()
fetchedData()
})
// FETCHED DATA & THE GAME
let fetchedData = () => {
fetch('data.json')
.then((res) => res.json())
.then((data) => {
theGame(data)
// THE GAME (retry) - same issue as original
function theGame() {
console.log("current level: ", level);
console.log("");
questionBox.style.display = "block"
questionTitle.textContent = data[level].question
option1.textContent = data[level].choice1
console.log('data[level].choice1: ', data[level].choice1);
option2.textContent = data[level].choice2
console.log('data[level].choice2: ', data[level].choice2);
option3.textContent = data[level].choice3
console.log('data[level].choice3: ', data[level].choice3);
option4.textContent = data[level].choice4
console.log('data[level].choice4: ', data[level].choice4);
console.log("");
optionBox.addEventListener('click', (event) => {
if (event.target.textContent !== data[level].answer.toString()) {
console.log("event.target", event.target)
console.log("wrong");
level++
console.log("level if wrong: ", level);
// AFTER ISSUE IS FIXED: decrease seconds from time
} else if (event.target.textContent === data[level].answer.toString()) {
console.log("correct!");
level++
console.log("level if correct: ", level);
// AFTER ISSUE IS FIXED: add seconds to time
}
theGame()
})
}
})
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<h6>View High Scores</h6>
<h6>Time: <span id="time-limit">120</span></h6>
</header>
<div class="start-game">
<h1>Quiz Game</h1>
<p>(click button to begin game)</p>
<button id="start-button">Start</button>
</div>
<div>
<h3 id="question-title"></h3>
<div class="question-box">
<div class="first-question">
<ol id="option-box">
<li class="option1" id="option1"></li>
<li class="option2" id="option2"></li>
<li class="option3" id="option3"></li>
<li class="option4" id="option4"></li>
</ol>
</div>
</div>
</div>
<div id="high-scores">
</div>
<script src="script.js"></script>
</body>
</html>
CSS
.start-game {
display: block;
}
li:hover {
cursor: pointer;
}
.question-box {
display: none;
}
QUIZ GAME DATA
[
{
"question" : "What does 2 + 2 equal?",
"choice1" : 7,
"choice2" : 23,
"choice3" : 67,
"choice4" : 4,
"answer" : 4
},
{
"question" : "What does 12 + 2 equal?",
"choice1" : 1,
"choice2" : 14,
"choice3" : 141,
"choice4" : 4,
"answer" : 14
},
{
"question" : "What does 1 + 20 equal?",
"choice1" : 21,
"choice2" : 29,
"choice3" : 66,
"choice4" : 3,
"answer" : 21
},
{
"question" : "What does 6 + 2 equal?",
"choice1" : 8,
"choice2" : 23,
"choice3" : 40,
"choice4" : 25,
"answer" : 8
},
{
"question" : "What does 3 + 2 equal?",
"choice1" : 753,
"choice2" : 5,
"choice3" : 35,
"choice4" : "Not this one. I am here for you ;)",
"answer" : 5
}
]