lab8q1_jsnotworking

<!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>
    </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 class="question-header">
                    Native to Asia, lesser panda is known by what name?
                </h3>

                <button type="button" class="q1button">Red Panda</button>
                <button type="button" class="q1button">Giant Panda</button>
                <button type="button" class="q1button">Kungfu Panda</button>

            </div>

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

                <!-- TODO: Add free response question here -->
                <h3 class="question-header">
                    What is the capital of Ecuador?
                </h3>
                <input type="text" id="capname" name="capname">
                <button type="button" class="q2button">Check Answer</button>

            </div>

        </div>
    </body>
    <script>

            let answers = ["Red Panda", "Quito"]

            const buttons = document.querySelectorAll('button.q1button');

            for (let i = 0; i < buttons.length; i++) {

                if (buttons[i].onclick && buttons[i].innerHTML == answers[0])
                {
                    //change button bg clolour to green
                    buttons[i].style.backgroundColor = "green";
                    //add html text that says correct answer!
                    //TODO
                }
                else if (buttons[i].onclick && buttons[i].innerHTML != answers[0])
                {
                    //change button bg colour to red
                    buttons[i].style.backgroundColor = "red";
                    //add html text that says incorrect answer!
                    //TODO
                }
                else {}
            }
    </script>
</html>