0
<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>

            // TODO: Add code to check answers to questions

       
           document.querySelector("#wrong1").addEventListener('click', function()
           {
               document.querySelector("#wrong1").style.backgroundColor = '#ff0000';

           });
        //   });.



        </script>

    </head>
    <body>

        <div class="jumbotron">
            <h1>Trivia!</h1>
        </div>

        <div class="container">

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

                <!-- TODO: Add multiple choice question here -->
                <h3>What are the colours of the Jamaican flag?</h3>
                <button id = "wrong1" >red,yellow,white</button>
                <button id = "wrong2" >black,gold,green</button>
                <button id = "correct" >green,blue,orange</button>

            </div>

            <div class="section">
                <h2>Part 2: Free Response</h2>
                <hr>

                <!-- TODO: Add free response question here -->
                 <h3>What is the name of Naruto's son?</h3>

            </div>

        </div>
    </body>
</html>
1

You can simply wrap

document.querySelector("#wrong1").addEventListener('click', function()
   {
      document.querySelector("#wrong1").style.backgroundColor = '#ff0000';

   });

in a document event of DOMContentLoaded. So then the function takes place after the DOM is loaded properly and you don't have to worry about the position of the script tag.

Hope this helps. If it does, please check the tickmark.

1
0

The script is looking for elements that do not exist in the DOM...yet. The html is loaded from top to bottom. Open the browser console to see that it is giving an "Uncaught TypeError".

Move the script to the end of body block.

You'll find a very detailed explanation at this post.

1

You must log in to answer this question.

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