This post has been de-listed
It is no longer included in search results and normal feeds (front page, hot posts, subreddit posts, etc). It remains visible only via the author's post history.
I am currently working on a vanilla JS quiz page and am running into a couple of issues. Currently, I am able to grab the answer value from the fetch request but not able to really grab the return value in a different function, even after I call it in the question check function.
I am basically trying to compare the user's input answer to the answer value grabbed by the fetch request. If it is correct, they get one point. If it is incorrect, their score resets to 0.
let RNG = Math.floor(Math.random() * 100)
const url = `https://jservice.kenzie.academy/api/clues/?category=${RNG}`
let score = 0
function getData() {
fetch(url)
.then((response) => response.json())
.then((data) => {
console.log(data)
let clueRNG = Math.floor(Math.random() * data.clues.length)
let question = data.clues[clueRNG].question
let answer = data.clues[clueRNG].answer.toLowerCase()
let category = data.clues[clueRNG].category.title
let questionDiv = document.getElementById("question")
let categoryDiv = document.getElementById("category")
questionDiv.innerHTML = ` Clue : ${question}`
categoryDiv.innerHTML = `Category : ${category}`
// console.log(question)
console.log(answer)
// console.log(category)
return answer
})
// .catch((error) => console.log(error))
}
getData()
function checkUserAnswer(event) {
event.preventDefault()
getData.then((answer) => {
console.log(answer)
return answer
})
let userAnswer = document.getElementById("userAnswer").value
console.log(event)
console.log(answer)
console.log(userAnswer)
if (userAnswer === answer) {
score
document.getElementById("userScore").innerHTML = `Score : ${score}`
console.log("Correct Answer" score)
getData()
} else {
score = 0
document.getElementById("userScore").innerHTML = `Score : ${score}`
console.log("Incorrect Answer" score)
getData()
}
}
My event.preventDefault also does not work as it says event is undefined.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="Kenzie" />
<meta name="author" content="Kenzie" />
<meta name="keywords" content="Kenzie" />
<!-- Title Page-->
<title>Kenzie JavaScript Page</title>
<!-- CSS-->
<link href="style.css" rel="stylesheet" media="all" />
</head>
<body>
<h1>Welcome to the Quiz Game</h1>
<h2 id="userScore"></h2>
<h2 id="category"></h2>
<h2>
<h2 id="question"></h2>
</h2>
<form id="userAnswerBox" onsubmit="checkUserAnswer()">
<input
type="text"
id="userAnswer"
placeholder="Enter Answer Here"
/>
<input type="submit" id="submitAnswer" value="Submit Answer" />
</form>
<script src="code.js"></script>
</body>
</html>
Subreddit
Post Details
- Posted
- 3 years ago
- Reddit URL
- View post on reddit.com
- External URL
- reddit.com/r/learnprogra...