Highlight row of form when input is focussed - focus

Question

I have the following piece of Mootools 1.11 code (not upgradable as this is within Joomla), which I want to highlight the form row, when an item within it is focussed. However, this doesn't work. I need to know how to access the parent div of the form item.
window.addEvent('domready', function() {
var list = $$('#ChronoContact_lensorder div.formrow');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:200, wait:false});
element.addEvent('focus', function(){
fx.start({
'background-color': '#e6f0f2',
color: '#FFF'
});
});
element.addEvent('focus', function(){
fx.start({
'background-color': '#FFF',
'color': '#2F9AD0'
});
});
});
});
HTML is:
<div class="formrow">
<label for="ud">Uncut Diameter:</label>
<input type="text" id="ud" name="ud" />
</div>
Thanks

Answer 1

Instead of looking for the <div>s, you might want to look for the actual <input> using var list = $$('#ChronoContact_lensorder div.formrow input'); Then refer to the parent using the .getParent() method when necessary, like this:
window.addEvent('domready', function() {
var list = $$('#ChronoContact_lensorder div.formrow input');
list.each(function(element) {
var fx = new Fx.Styles(element.getParent(), {duration:200, wait:false});
element.addEvent('focus', function(){
fx.start({
'background-color': '#e6f0f2',
color: '#FFF'
});
});
element.addEvent('blur', function(){
fx.start({
'background-color': '#FFF',
'color': '#2F9AD0'
});
});
});
});
Untested code. Note that the second event is now blur instead of focus, or else both events will fire at the same time and might revert each other's effects!