Javascript - how to show DIV after entering text in <input>

Question

I am trying to write a function in JavaScript that will show / hide the "DIV" after entering some text.

I managed to write it, but I can’t get it to work only if the user adds an input value greater 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); } }); }); 

The script above works, but it works no matter what you type in "enter". I want to execute the script only when I put a value greater than 8 (9, 10, 101, etc.)

I tried adding this (no effect):

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

Here is a working script where I commented out the 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

Screenshot

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

Answer 2

This is not .value, but val ()

Your jsfiddle should be

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

Answer 3

Try the following:

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

Answer 4

try it

 $(document).ready(function() { $("#area").keyup(function() { if ($("#area").val() > 8) { $('#text1').toggle("slow"); } }); }); 

Answer 5

parse the value to int before comparison and use val instead of value

 if (parseInt($("#area").val()) > 8){ //write the action to be performed here }