jquery - Change color of li class with javascript when keyboard key is pressed -

i've created keyboard html , css, , i'm trying make keys "glow" different background-color when same key pressed on keyboard (the real-life keyboard is).

it looks this:

<div id="keyboard"> <ul class="row"> <li class="letter">q</li> <li class="letter">w</li> . . . </ul> </div> 

and have following javascript code:

$('#keyboard .letter').keydown(function() { $(this).addclass('red'); }).keyup(function() { $(this).removeclass('red'); }); 

this worked me:

html

<div id="keyboard">     <ul class="row">         <li class="letter" id="q">q</li>         <li class="letter" id="w">w</li>. . .</ul> </div> 

jquery

$(document).keypress(function(e){      var which_letter = string.fromcharcode(e.which);     $('#'+which_letter+'').addclass('red');  });  $(document).keyup(function(){     $(".letter").removeclass('red'); }); 

css

 .red { color:#f00; } 

demo

note

if letter glow no matter if he/she presses 'x' or 'x', change:

var which_letter = string.fromcharcode(e.which); 

to:

var which_letter = string.fromcharcode(e.which).tolowercase(); 

otherwise user must press value of letter's id.