showing a div based on a textfield value?

Question

Hello all, I am trying to get a different div to display based on the value in a textfield. So, right now, I have this:

<textarea id="characters">100</textarea>

<div id="upto100">
This is content up to 100 characters
</div>

<div id="upto200">
This is content up to 200 characters
</div>

<div id="upto300">
This is content up to 300 characters
</div>

I think this is a mix of Javascript and Jquery. Any thoughts and help?

Answer 1

You just need a little event handler and string concatenating:

$('#characters').bind('keyup change', function(){
    var elem = $('#upto' + $(this).val());

    if(this.lastElem)
       this.lastElem.fadeOut('slow');

    if(elem.length){
       this.lastElem = elem;         
       elem.fadeIn('slow');
    }
});

Example: http://www.jsfiddle.net/YjC6y/25/