Change form color background on submit click using java-CodePudding

I have this form

What i need to to do is to change the color of the form's background to either red if it's wrong or green if it's right, when the "check answer" is clicked.

this is what i have so far:

Javascript


function chagecolor()
        {
            var changec = document.getElementById("answer")
            if (changec == "BURJ KHALIFA")
            {
                changec.style.backgroundColor = '#F40320';

            }
            
            else
            {
                changec.style.backgroundColor = '#03C13D';

            }
            

HTML

            <hr>
            What's the tallest building in the world in 2022? <!--BURJ KHALIFA-->
            <form >
                <input style="text-transform: uppercase;" type="text" id="answer" name="answer">
                <input onclick="changecolor()" id="turnon" type="submit" value="Check Answer">

Can someone point me on the right direction Thanks

CodePudding user response：

Here is your problem:

        var changec = document.getElementById("answer")
        if (changec == "BURJ KHALIFA")

document.getElementById will return an Element or null/undefined. Neither of these will ever be equal to a String

Instead, you want

        if (changec.value == "BURJ KHALIFA")

CodePudding user response：

First of all you are calling the wrong method on the input.

Secondly your if statement in the method should check for changec.value and not only changec.

I hope this can guide you in the right direction :D

CodePudding user response：

Update your condition as below

if (changec.value == "BURJ KHALIFA")

CodePudding user response：

There is an article https://bobbyhadz.com/blog/javascript-change-background-color-of-input-field which have detailed description of what you want. YOu just have to add the condition for color change. Hope this will work for you

Thanks