" This" keyword works in-line, embedded and external yes or no?

Hi I am trying to devise a method to give keyboard navigators stronger indication of exactly what link they tabbed to with the keyboard. I am figuring if a parent element say a properly CSS formatted LI tag changes color when the child <a> tag is tabbed to this would be good indication for keyboard navigators. Those little dotted lines are hard to see so a color change of the parent element would be much better. So endeavoring to do it I came up with the code below. When I use in-line JavaScript everything works great. I mean I have not styled my LI tags yet to nicely go around my <a> tags yet, but this will come, for I know how to do that. The trouble I am having is I cannot get the equivalent embedded JavaScript or external JavaScript to work with the "this" keyword. So could somebody please look at my code below and tell me what I need to do. The link with the in-line JavaScript works but the embedded JavaScript link does not. So what goes.
Thanks Marc

<head>
<title>test page</title>
</head>
<script language="JavaScript">
function chOn()
{
this.parentNode.style.backgroundColor='black';
}
function chOff()
{
this.parentNode.style.backgroundColor='transparent';
}
</script>

<body>
<ul>
<li>
<a href="#" style="background-color:white"
onfocus="this.parentNode.style.backgroundColor='black'"
onblur="this.parentNode.style.backgroundColor='transparent'">
Sample element with keyboard event handlers.
</a>
</li>

<li>
<a href="#" style="background-color:white"
onfocus="chOn()"
onblur="chOff">
Sample element with keyboard event handlers.
</li>
</a>
</ul>
</body>

" This" keyword works in-line, embedded and external yes or no?

" This" keyword

MarcMiller

Dijkgraaf

MarcMiller

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week