Hello everyone, i am having a strange problem that I cannot track down. I am making a simple quiz in vanilla JS, however when I tried to display the results I noticed that my event listener just not working at all. Could somebody tell me where I’ve gone wrong?
The code works well otherwise.
const correctAnswers = ['A', 'A', 'B', 'A'];
const form = document.querySelector('.quiz-form');
const result = document.querySelector('.result')
// dont forget the . when referencing classes.
// create an array with the value of right answers
// submitting the user answers
form.addEventListener('submit', e => {
e.preventDefault();
let score = 0;
const userAnswers = [form.q1.value, form.q2.value, form.q3.value, form.q4.value];
// check answers
userAnswers.forEach((answer, index) => {
if(answer === correctAnswers[index]) {
score += 25;
}
});
//showing score
result.querySelector('span').textContent = '${score}%';
result.classList.remove('d-none');
});
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>English Quiz</title>
</head>
<body>
<!--Top section-->
<div class="intro py-3 bg-green text-center">
<div class="container">
<h2 class='text-primary display-3 my-100'>English Quiz</h2>
</div>
</div>
<!--Results -->
<div class="result py-4 d-none bg-light text-center">
<div class="container lead">
<p>You are <span class="text-primary display-4 p-3">0%</span>real man</p>
</div>
</div>
<!--quiz-->
<div class="quiz py-4 bg-primary">
<div class="container">
<h2 class="my-5 text-white">Questions</h2>
<form id="formthing" class="quiz-form text-light">
<div class="my-5">
<p class="lead">1. Have you ever been as to far as?</p>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q1" value="A" checked>
<label class="form-check-label"></label>Yes.</input>
</div>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q1" value="B">
<label class="form-check-label"></label>Nah.</input>
</div>
</div>
<div class="my-5">
<p class="lead">2. Sauce? </p>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q2" value="A" checked>
<label class="form-check-label"></label>Possibly</input>
</div>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q2" value="B">
<label class="form-check-label"></label>Cough</input>
</div>
</div>
<div class="my-5">
<p class="lead">3.Sample text</p>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q3" value="A" checked>
<label class="form-check-label"></label>blah</input>
</div>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q3" value="B">
<label class="form-check-label"></label>yes.</input>
</div>
</div>
<div class="my-5">
<p class="lead">4. Forth question</p>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q4" value="A" checked>
<label class="form-check-label"></label>Gj</input>
</div>
<div class="form-check my-2 text-white-50">
<input type="radio" name="q4" value="B">
<label class="form-check-label"></label>Bj.</input>
</div>
</div>
<div class="text-center">
<input type="submit" class="btn btn-light">
</div>
</form>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Here you go
Sorry, didn’t see that. I am trying to have the submit button calculate the score and also remove the ‘d-none’ class on the results span
You said it was not doing anything. That is not true. Clicking the button calculate the score, removes the class “d-none” and replaces the text content of the span element nested in the div with class=“result” with ${score}%.
You just need to learn about how to use Template Literals which is covered in the curriculum link below.
Create Strings using Template Literals
That lesson solved the score problem, (I had the wrong quotes in case someone else reads this)
However there is still the problem of the (‘d-none’) class being removed as soon as the page loads instead of when the button is pushed.
That is what I meant originally when I said the event listener wasn’t working, sorry I was not more clear.
I was following a tutorial. It would appear my tutorial is a little bit old.
Oops.
Thanks so much for your help Randell, you are always giving out great advice on these fourms.