Reputation: 35

Basic Javascript, CSS, HTML

The assignment that this is from is a lab and is pretty basic and the answer is given to us as a Walkthrough video; however, I followed the walk-through video exactly but for some reason, my code is not doing what it is supposed to.

We have to make a simple trivia page that has two questions. First question is supposed to be a multiple choice and second question is to enter text response.

For the first question, if a user clicks on a button with an incorrect answer, the button should turn red and text should appear beneath the question that says “Incorrect”. If a user clicks on a button with the correct answer, the button should turn green and text should appear beneath the question that says “Correct!”.

For the second question, we are supposed to make it so that the field changes color when a user confirms their answer. If the user types an incorrect answer and presses the confirmation button, the text field should turn red and text should appear beneath the question that says “Incorrect”. If the user types the correct answer and presses the confirmation button, the input field should turn green and text should appear beneath the question that says “Correct!”.

I followed the directions precisely but for some reason my code is not working. It shows the elements properly but the Javascript features are not working. Maybe I am overlooking something.

Here is my HTML file:

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

            // TODO: Add code to check answers to questions
            // Listen for event of content loaded and then run the anonymous function that follows.
            // When we click on the button for the correct answer, we do two things: 1) change the button to be green 2)add text that user
            // question was answered correctly.
            document.addEventListener('DOMContentLoaded', function() {
                let correct = document.querySelector('.correct'); // selecting that button for correct answer. will select the only
                                                                 // element with class name of '.correct' and store it inside variable
                                                                // correct.
                correct.addEventListener('click', function () {
                    correct.style.backgroundColor = 'green';
                    document.querySelector('#feedback1').innerHTML = 'Correct!'; //# in #feedback mean id is feedback1
                    });

                    // When an incorrect answer is clicked change color to red and state Incorrect

                let incorrects = document.querySelectorAll('.incorrect'); // will return an array of matches for any element that has
                                                                          // a class of '.incorrect'

                for (i = 0, i < incorrects.length, i++) {
                    incorrects[i].addEventListener('click', function () {
                        incorrects[i].style.backgroundColor = 'red';
                        document.querySelector('#feedback1').innerHTML = 'Incorrect';
                    });
                }

                // <input type="text" ></input>
                // <button id = "check">Check Answer</button>
                // <p id = "feedback2"></p>
                document.querySelector('#check').addEventListener('click', function(){
                    let input = document.querySelector('input'); // to get access to input field were user was typing in their response
                    if (input.value == 'Switzerland') {
                        input.style.backgroundColor = 'green';
                        document.querySelector('#feedback2').innerHTML = 'Correct';
                    }
                    else {
                        input.style.backgroundColor = 'red';
                        document.querySelector('#feedback2').innerHTML = 'Incorrect';
                    }
                });

            });


        </script>

    </head>
    <body>

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

        <div class="container">

            <div class="section">
                <h2>Part 1: Multiple Choice </h2>
                <hr>
                <h3>What is the approximate ratio of people to sheep in New Zealand?</h3>

                <button class = "incorrect">6 people per 1 sheep</button>
                <button class = "incorrect">3 people per 1 sheep</button>
                <button class = "incorrect">1 person per 1 sheep</button>
                <button class = "incorrect">1 person per 3 sheep</button>
                <button class = "correct">1 person per 6 sheep</button>

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

                <!-- TODO: Add multiple choice question here -->

            </div>

            <div class="section">
                <h2>Part 2: Free Response</h2>
                <hr>
                <h3>In which country is it illegal to own only one guinea pig, as a lone guniea pig might get lonely?</h3>
                <!-- TODO: Add free response question here -->
                <input type="text" ></input>
                <button id = "check">Check Answer</button>

                 <p id = "feedback2"></p>

            </div>

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

And here is my CSS file:

body {
    background-color: #fff;
    color: #212529;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.jumbotron {
    background-color: #477bff;
    color: #fff;
    margin-bottom: 2rem;
    padding: 2rem 1rem;
    text-align: center;
}

.section {
    padding: 0.5rem 2rem 1rem 2rem;
}

.section:hover {
    background-color: #f5f5f5;
    transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
}


button, input[type="submit"] {
    background-color: #d9edff;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    text-align: center;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    vertical-align: middle;
}


input[type="text"] {
    line-height: 1.8;
    width: 25%;
}

input[type="text"]:hover {
    background-color: #f5f5f5;
    transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}

Upvotes: 0

Answers (2)

Gellio Gao

Reputation: 843

Firstly, you could see an error of for loop statements if you edit the code you given in a code editor like VS Code, and modify the for loop like for (i = 0; i < incorrects.length; i++).

Secondly, the way you add event listener needs to be changed to the code below.

for (i = 0; i < incorrects.length; i++) {
    let index = i;
    incorrects[index].addEventListener('click', function () {
        incorrects[index].style.backgroundColor = 'red';
        document.querySelector('#feedback1').innerHTML = 'Incorrect';
    });
}

Upvotes: 1

猫ハッカー

Reputation: 62

In HTML line 29 should be: for (var i = 0; i < incorrects.length; i++) { Syntax error can sometimes be annoying to fix lol. I advise you to use a code editor like VSCode.

Upvotes: 2

Basic Javascript, CSS, HTML

Answers (2)

Related Questions