JS addEventListener triggering before submit

1

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');
});
3 
<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

5

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

6

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

8

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.

10

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.