javascript - How to enhance such piece of code -


I am now working on some type of typing tutor. I have a simple keyboard written in a pure keyboard. Some HTML is here

  & lt; Div class = "keyboard" & gt; & Lt; Div class = "keyboardRow" & gt; & Lt; Span class = "key" id = "q" & gt; Q & lt; Sub & gt; UM & lt; / Sub & gt; & Lt; / Span & gt; & Lt; Span class = "key" id = "w" & gt; W & lt; Sub & gt; C & lt; / Sub & gt; & Lt; / Span & gt; & Lt; Span class = "key" id = "e" & gt; E & lt; Sub & gt; U & lt; / Sub & gt; & Lt; / Span & gt; & Lt; Span class = "key" id = "r" & gt; R & lt; Sub & gt; C & lt; / Sub & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Then I want to change the border of the key pressed. I have created this piece of "trashcode" in javascript

  document.onkeypress = checkKeyPress; Function checkpresspress (e) {var KeyID = e.charCode; Switch (KID) {Case 113: Pakki = Document. GetElementById ("q"); Pkey.style.borderColor = "red"; break; Case 119: pkey = document.getElementById ("w"); Pkey.style.borderColor = "red"; break; Case 101: pkey = document.getElementById ("e"); Pkey.style.borderColor = "red"; break;  

...............

and so on. As you can see, friends, my question is: How can I save and write spaghetti "case" statement which is clear to read and read?