Problem with adjacent function in prototype

Question

Hi, I have this code:

<input name="rz" class="required validate-string" style="margin-left:17px"      id="rz" title="Input rz value" size="23" />
<p class="msg" style="display:none;">Input rz value</p>

In the head I have:

Event.observe(window, 'load', function() {

$$("input").each(function(field){
  Event.observe(field, "focus", function(input) {
    input.adjacent('p.msg').show();
  });
  Event.observe(field, "blur", function(input) {
    input.adjacent('p.msg').hide();
  });
});

});

The idea is that when the input get the focus, the p element appears and on blur it goes away. The problem is that neither is working, and the error console shows "input.adjacent is not a function"

I'm using prototype 1.6.1 and scriptaculous 1.8.3

Answer 1

Argument passed to event handler (i.e. function passed to Event.observe function) is event object, not target element. Element to which event handler is bound is passed as "this" pointer, so you should use:

this.adjacent('p.msg').hide();

Answer 2

What el.pescado says is true.

Perhaps you should be using .next() or .previous() instead of .adjacent() if you want to get the item beside the element triggering the event.