Can't get javascript to modify a header

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>

Solution

Here is a working example of your code. First you have a closing "/div" without an opening "div". You also have a typo on BackgroundColor (witout d). It is better to define const in the beginning of your javascript (unless sometimes necessary). Also open full page to see colored background when using snippet. Besides these errors your code could have worked :-)

const form = document.querySelector('#form')
const solutionDisplay = document.querySelector('#solution')
const inputField = document.querySelector('#input')
console.log(inputField)
let a = "Aconcagua";

function wrong2(){
        solutionDisplay.innerHTML = "Incorrect.";
        inputField.style.backgroundColor = 'red';
}
function right2(){
        solutionDisplay.innerHTML = "Correct!";
        inputField.style.backgroundColor = 'green';
}


form.addEventListener('submit', function(event){
        if(inputField.value == a){
                right2();
        }
        else{
                wrong2()
        }
        event.preventDefault();
});

<div>
        <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="solution"></h2>
    </div>