jQuery if inside a function undefined

Question

I have this simple code that shows an image and a word and you have to complete the field. If you write the word correctly, a congrats popup comes up.

I was able to figure out how to randomize items in an array to display a random image. Now I want to check on each keyup if it matches that random word.

It seems there's something wrong with my IF statement because if I remove it, popup works perfectly.

Error:

uncaught typeerror undefined is not a function

Code:

<html>
    <head>
    <title>AutistApp</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery.min.js"></script>
    </head>

    <body>
        <div id="container">

        <div class="eval">CORRECTO</div>
        <div class="siguiente"><a href=".">&iexcl;OTRA VEZ!</a></div>

        <div class="dibujo"><img id="dibujito" src="img/apple.png" /></div>
        <div class="palabra">MANZANA</div>
        <div class="respuesta"><input type="text" id="resp" name="resp" value=""/>
        </div>
    </div>

<script type="text/javascript"> 

/***** RANDOM VALUES *****/
var messages = ["manzana", "pera", "banana"],
    message = messages[Math.floor(Math.random() * messages.length)];

$('.palabra').text(message);
$('#dibujito').attr('src','img/'+message+'.png');

/***** KEYDOWN CHECK *****/
$(document).ready(function(){
    $('#resp').keyup(function(){
        if ($("#resp").value() == message) {
            $('.eval').slideDown();
            $('.eval').delay(3000).fadeOut();
            $('.siguiente').delay(3000).slideDown();
        }
    });
});

</script>
</body>
</html>

jQuery doesn't have a value() method, it's val().

Barmar
– Barmar

2014-04-30 03:54:54 +00:00
Commented Apr 30, 2014 at 3:54 — Barmar
– Barmar, Commented Apr 30, 2014 at 3:54

Felix · Accepted Answer · 2014-04-30 03:55:25Z

2

You need to use .val() instead of .value() to get the value of input element, so you can do:

if ($("#resp").val() == message) {

instead of:

if ($("#resp").value() == message) {

You also need to wrap all of your code inside DOM ready handler:

$(document).ready(function () {
    var messages = ["manzana", "pera", "banana"],
        message = messages[Math.floor(Math.random() * messages.length)];

    $('.palabra').text(message);
    $('#dibujito').attr('src', 'img/' + message + '.png');

    $('#resp').keyup(function () {
        if ($("#resp").val() == message) {
            $('.eval').slideDown();
            $('.eval').delay(3000).fadeOut();
            $('.siguiente').delay(3000).slideDown();
        }
    });
});

answered Apr 30, 2014 at 3:55

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aniket · Accepted Answer · 2014-04-30 04:05:00Z

2

Folks you need to use

 $("#resp").val()

in if condition.

answered Apr 30, 2014 at 4:05

Aniket

1181 silver badge7 bronze badges

Collectives™ on Stack Overflow

jQuery if inside a function undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related