Can't get javascript to modify a header

ghz 7months ago ⋅ 89 views

This code is supposed to ask the user for an input and return incorrect or correct depending on the string that was submitted(the correct answer is "Aconcagua"). When running it and submitting neither of those answers is printed into the screen. I am pretty new to javascript and HTML.

function wrong2()
                {
        document.querySelector('#2solution').innerHTML = "Incorrect.";
        document.querySelector('#input').style.backgrounColor = 'red';
}
function right2()
                {
        document.querySelector('#2solution').innerHTML = "Correct!";
        document.querySelector('#input').style.backgrounColor = 'green';
}

a = "Aconcagua";
document.querySelector('#form').addEventListener('submit', function(event){
    if (document.querySelector('#input').value.localeCompare(a) == 0)
    {
        right2();
    }
    else
    {
        wrong2();
    }

    event.preventDefault();
});
<div class="wrapper">
    <div class="header">
        <h1>Trivia!</h1>
    </div>
    <div class="section">
        <h2>Part 2: Free Response</h2>
        <hr>
        <h3>What is the highest mountain in South America?</h3>
        <form action="" id="form">
            <input id="input" type="text">
            <button id="b" type="sumbit">Submit</button>
        </form>
    </div>
    <h2 id="2solution"></h2>
</div>

Answers

There are a couple of issues in your code that need to be corrected to make it work as intended:

  1. Typo: You have a typo in the right2() and wrong2() functions. The property backgroundColor is misspelled as backgrounColor.

  2. Incorrect event listener: You're listening for the submit event on the form, but the form submission is not being prevented when the event listener is triggered. You need to prevent the default form submission behavior using event.preventDefault().

Here's the corrected code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trivia</title>
    <style>
        .wrapper {
            text-align: center;
            margin-top: 50px;
        }
        .header {
            background-color: #333;
            color: white;
            padding: 20px;
        }
        .section {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <h1>Trivia!</h1>
        </div>
        <div class="section">
            <h2>Part 2: Free Response</h2>
            <hr>
            <h3>What is the highest mountain in South America?</h3>
            <form action="" id="form">
                <input id="input" type="text">
                <button id="b" type="submit">Submit</button>
            </form>
        </div>
        <h2 id="2solution"></h2>
    </div>

    <script>
        function wrong2() {
            document.querySelector('#2solution').innerHTML = "Incorrect.";
            document.querySelector('#input').style.backgroundColor = 'red';
        }
        
        function right2() {
            document.querySelector('#2solution').innerHTML = "Correct!";
            document.querySelector('#input').style.backgroundColor = 'green';
        }
        
        a = "Aconcagua";
        document.querySelector('#form').addEventListener('submit', function(event) {
            if (document.querySelector('#input').value.localeCompare(a) == 0) {
                right2();
            } else {
                wrong2();
            }
        
            event.preventDefault();
        });
    </script>
</body>
</html>

In this corrected code:

  • The backgroundColor property is correctly spelled.
  • The form submission event is prevented using event.preventDefault() inside the event listener. This ensures that the form is not submitted in the default way, allowing your JavaScript code to handle the submission and display the correct message.
#html #forms