Hide div when input has an assigned value

Question

I'm trying to hide a div when the value = 10

Here is the code and demo working fine:

<script>
$('input[name=test]').keyup(function(){
  if($(this).val()<10)
    $('#yeah').show();
  else
    $('#yeah').hide();
 });
</script>

<label>Type whatever</label>
<input type="text" name="test"value="10"  />

<div id="yeah" style="display:none;">
<input type="submit"   />
</div>

But I'm trying to convert that code into Prototype code and I tried this code :

Event.observe(window, 'load', function () { 
$('input[name=test]').keyup(function(){
if($(this).val()<10)
$('#yeah').show();
else
$('#yeah').hide();
});
});

I only want to hide the div when input value = 10 into prototype code.

Please somebody can help me?

Answer 1

Give the textbox an ID . For example:

<input type="text" id="txtbox" name="test" value="10" />

Change:

<div id="yeah" style="display:inline;">

To:

<div id="yeah" style="display:none;">

You need to use the $$ function which returns an array .

Event.observe('txtbox', 'keyup', function () {
     if ($$('input[name="test"]')[0].value < 10){
         $$('#yeah')[0].show();
     }
     else{
         $$('#yeah')[0].hide();
     }
});

Note: You could also use .first() instead of [0]

JSFiddle

Answer 2

you have a issue with prototype lib,

the Event.observe function is never triggered, secondly, you seem to still using the jquery api

$().keyup()

and you only load the prototype function.

Now days people rarely uses prototype, people use jquery for dom and underscore/lodash for iterations.