Home/ Questions/Q 8459815
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T13:25:57+00:00

I’m very new to jQuery and I need some help: What I am looking

  • 0

I’m very new to jQuery and I need some help:

What I am looking for:
I want to make a div appear when a person enters the correct answer into a textbox.
If they get the wrong answer, a different div will show up.

What I have now:
Currently, I am using Javascript to output 2 different texts depending on what the person answers. please take a look at what it looks like now:
http://yankrupnik.com/wowza/cats.html

This is the html on that testpage

<!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
            <script type="text/javascript"> 
                $(document).ready(function(){
                    $("button#start").click(function(){
                        $("div#catbox").animate({height:336},1000);
                        $("div#catbox").animate({width:480},1000);
                        $("div#catbox").animate({height:100},700);
                        $("div#catbox").animate({width:100},500);
                        $("div#catbox").hide(2000);
                        $(this).hide();
                    });
                }); 
            </script> 
        </head>
    <body>
        <div align="center">
            <h3>The Cat Test</h3>
            <p>Click "start" and count how many cats you see! Enter your estimation below, and if you've got it, collect a cookie!</p>
            <button id="start">START!</button>
            <br /><br />
                <div id="catbox" style="background:#98bf21;height:100px;width:100px;overflow:hidden">
                <img src="images/manycats.jpg">
                </div>


            <p>So, how many cats did you manage to spot?</p> <input id="cats" value="enter number here" onfocus="this.value='';" />
            <button onclick="valFunction () ">Submit Answer!</button>

            <p id="demo"></p>

            <script type="text/javascript">
            function valFunction()
                {
                cats=document.getElementById("cats").value;
                validation=(cats==7)?"Nice! You've Got it!":"Sorry... press [F5] and try again!";
                document.getElementById("demo").innerHTML=validation;
                }
            </script>     
        </div>
    </body>
    </html>

thanks for all your help in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use .show() to display the div. I’m assuming they’ll be initially hidden with display: none:

    if (answer == correctAnswer) {
  $("#id_of_correct_answer_div").show();
} else {
  $("#id_of_wrong_answer_div").show();
}
    • 0