Javascript - how to show DIV after putting text into <input>

Question

I'm trying to write function in JavaScript which will show/hide 'DIV' after putting some text into .

I managed to write it, however I cannot to make it work only if user put to the 'input' value bigger than 8.

Html:

<input type='text' id='area' style='border: 1px solid;'></input><br>
<div id='text1' style='display:none; '>Examletext</div>

JavaScript:

$(document).ready(function() {
    $("#area").keyup(function() {
        if ($('#text1').is(":hidden")) {
            $('#text1').show(500);
        } else {
            $("#text1").hide(500);
        }
    });
});

Above is working script, but this works whatever you put into the 'input'. I want execute the script only when I put value bigger than 8 (9, 10, 101 etc.)

I tried to add this(no effect):

if ($("#area").value > 8){}

Here is the working script where I have commented out line described above - jsfiddle

Answer 1

change $("#area").value to $("#area").val()

$(document).ready(function() {
    $("#area").keyup(function() {
        if ($("#area").val() > 8) {
            if ($('#text1').is(":hidden")) {
                $('#text1').show(500);]
            } else {
                $("#text1").hide(500);
            }
        }
    });
});

In jQuery you need to use val() not value

Fiddle Demo

Documentation : http://api.jquery.com/val/

Answer 2

It's not .value but val()

Your jsfiddle should be

if ($("#area").val().length > 0){

Answer 3

Try this:

$(document).ready(function() {
$("#area").keyup(function() {
    if ($("#area").val() > 8){
        if ($('#text1').is(":hidden")) {
            $('#text1').show(500);
        } else {
            $("#text1").hide(500);
        }
    }
 });
});