0

My "Check Answer" button doesn't work for the free response question. I followed the "Not sure how to solve?" video so there might be have been a problem while copying it over.

Here is the code:

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">
        <title>Trivia!</title>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                let correct = document.querySelector('#correct');
                correct.addEventListener('click', function() {
                    correct.style.backgroundColor = 'green';
                    document.querySelector('#feedback1').innerHTML = 'Correct!';
                });
                let incorrects = document.querySelectorAll('.incorrect');
                for (let i = 0; i < incorrects.length; i++) {
                    incorrects[i].addEventListener('click', function() {
                        incorrects[i].style.backgroundColor = 'red';
                        document.querySelector('#feedback1').innerHTML = 'Incorrect';
                    });
                }

                
                document.querySelector('#check').addEventListener('click', function() {
                    let input = doctument.querySelector('input');
                    if (input.value === 'hi') {
                        input.style.backgroundColor = 'green';
                        document.querySelector('#feedback2').innerHTML = 'Correct!';
                    } else {
                        input.style.backgroundColor = 'red';
                        document.querySelector('#feedback2').innerHTML = 'Incorrect';
                    }
                });
            });
        </script>
    </head>
    <body>
        <div class="header">
            <h1>Trivia!</h1>
        </div>

        <div class="container">
            <div class="section">
                <h2>Part 1: Multiple Choice </h2>
                <hr>

                <button id = "correct">1</button>
                <button class = "incorrect">2</button>

                <p id = "feedback1"></p>
            </div>

            <div class="section">
                <h2>Part 2: Free Response</h2>
                <hr>
                <input type = "text"></input>
                <button id = "check">Check Answer</button>
                <p id = "feedback2"></p>
            </div>
        </div>
    </body>
</html>

I am completely lost about what is happening so if you can help thank you in advance.

3
  • Suggest check the browser console for errors. Dec 2, 2023 at 15:48
  • Thank you so much that worked
    – Raheel A
    Dec 2, 2023 at 16:32
  • spelling error: 'doctument' should say 'document' in your let of the third query selector.
    – UpAndAdam
    Dec 2, 2023 at 19:29

1 Answer 1

1

In line 33 I misspelled document as "doctument".

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .