Making Color Editor Keyboard Accessible

Attempting to add onkeypress, troubles with a nested function.

[JAB Creations]

I've been attempting to make the script below keyboard accessible. In the XHTML code I've changed the elements to anchors so users can tab through the anchors with their keyboard. The problem is that browsers like Firefox will use the onclick event for the keyboard in certain situations and not for others; this situation requires having the onkeypress JavaScript event also triggering the function in addition to the onclick event.

So the issue I'm specifically having is trying to take line 8 and call a new function I'm trying to make of the code below line 8, that way I can use the double solid pipes and add support for onkeypress however I keep hitting all sorts of problems with recursion and the new function not being defined. Suggestions?

- John

JavaScript

// Color Editor
function coloreditor() {
result = null;
elements = document.body.getElementsByTagName('*');
for(i=0; i < elements.length; i++)
{
if (!elements[i].onclick) {
elements[i].onclick = function() // Line 8
{
re = /^color([0-9abcdef]+)/i;
if (this.id.match('^color')) {
var mycolor = this.id;
result = mycolor.substr(5);
}

if (result == null) {return true;}
else if (this.id && !this.id.match('^color'))
{
if (document.getElementById('myselect').selectedIndex == 0) {this.style.backgroundColor = '#' + result;}
else if (document.getElementById('myselect').selectedIndex == 1) {this.style.color = '#' + result;}
else {alert('You seem to be missing a form.');}
}
}
}
}
}

XHTML Code

<select id="myselect">
<option>Background Color</option>
<option>Text Color</option>
</select>

<div id="editorcolors">
<div class="colorset">
<a id="color000" style="background-color: #000;" tabindex="3">...</a>
<a id="color555" style="background-color: #555;" tabindex="3">...</a>
<a id="colorbbb" style="background-color: #bbb;" tabindex="3">...</a>
<a id="colorfff" style="background-color: #fff;" tabindex="3">...</a>
</div>
</div>

[JAB Creations]

Figured this out last night about an hour or so after I posted. As always the follow up with working code (requires an onload event)...

- John

function coloreditor()
{
result = null;
elements = document.body.getElementsByTagName('*');
for(i=0; i < elements.length; i++)
{
if (!elements[i].onclick)
{
//elements[i].onclick = function() // then define it to use this one
elements[i].addEventListener('click',changecolor,false)
elements[i].addEventListener('keypress',changecolor,false)
}
}

function changecolor() { //alert(this);
re = /^color([0-9abcdef]+)/i;
if (this.id.match('^color')) {
var mycolor = this.id;
result = mycolor.substr(5);
}
if (result == null) {return true;}
else if (this.id && !this.id.match('^color'))
{
if (document.getElementById('myselect').selectedIndex == 0) {this.style.backgroundColor = '#' + result;}
else if (document.getElementById('myselect').selectedIndex == 1) {this.style.color = '#' + result;}
else {alert('You seem to be missing a form.');}
}
}
}