Помогите улучшить код

[Mitrandir]

Приветствую всех!
Давненько я тут не бывал.

Итак, словесное описание задачи:
есть условная схема клавиатуры, сделанная с помощью HTML.
При нажатии на определенную клавишу должен меняться цвет рамки вокруг "клавиши" с синего на красный. Кусок разметки

<div class="keyboard">
<div class="keyboardRow"><span class="key" id="q">Q<sub>Й</sub></span>
    <span class="key" id="w">W<sub>Ц</sub></span>
    <span class="key" id="e">E<sub>У</sub></span>
    </div></div>

Говнокод на js, реализующий задачу в нулевом приближении

function checkKeyPress(e)
{ var KeyID = e.charCode;
  switch (KeyID){
  case 113: pkey = document.getElementById("q");
	        pkey.style.borderColor = "red";
 		    break; 
   case 119: pkey = document.getElementById("w");
             pkey.style.borderColor = "red";
                    break; }

Вопрос, как его улучшить и избавиться от развесистого кейса?

Использовать объекты?

[ksa]

как его улучшить и избавиться от развесистого кейса?

Например поменять ИДшники на

id='key_code_<его_код>'

Тогда можно сразу обратиться к элементу

pkey = document.getElementById('key_code_113');

[Arramis]

Вопрос, как его улучшить и избавиться от развесистого кейса?

Удобнее всего с помощью делегирования события.
Тоесть как то так:

document.querySelector('.keyboard').onkeypress = function(e) {
	var target = !e.target ? window.event.srcElement : e.target;

	if (target.className.indexOf('key') > -1) {
		target.style.borderColor = 'red';
	} else {
		//	some code
	}
}

[Mitrandir]

Попробую так. Простота — это хорошо.

[Mitrandir]

Немного не уловил идею.
Можно полный код

[Mitrandir]

Уже додумал. Вопрос снимается.

[Arramis]

Немного не уловил идею.
Можно полный код

я прошу прощения, делегирование тут не нужно было

<div class="keyboard">
		<div class="keyboardRow">
			<span class="key" id="keycode_113">Q<sub>Й</sub></span>
			<span class="key" id="keycode_119">W<sub>Ц</sub></span>
			<span class="key" id="keycode_101">E<sub>У</sub></span>
		</div>
	</div>

	<script type='text/javascript'>
	document.onkeypress = function(e) {
		e = e || event;
		
		var keys = this.querySelectorAll('.key'),
				i = 0,
				keyCode = e.keyCode ? e.keyCode : e.charCode
		
		for ( ;i < keys.length; ++i ) {
			if (keys[i].id.indexOf(keyCode) > -1) {
				keys[i].style.border = '1px solid red';
				break;
			}
		}
	}
	</script>

[Mitrandir]

Вот такой получился код

function checkKeyPress(e) { 
  var KeyID = String.fromCharCode(e.charCode).toLowerCase();
  document.getElementById(KeyID).style.backgroundColor = "red";
  }
  document.onkeypress = checkKeyPress;

function checkKeyReleased(e)
{ var KeyID = String.fromCharCode(e.keyCode).toLowerCase();
  document.getElementById(KeyID).style.backgroundColor = "white";
}
  document.onkeyup = checkKeyReleased;

Как его можно доработать так, чтобы обрабатывать хотя бы квадратные скобки и знаки препинания на английской раскладке?

[Mitrandir]

Спасибо. Завтра покручу.
А то я пошел другим путём

[Mitrandir]

Скажите, а как возможно обработать onkeyup, чтобы при отпускании клавиши возвращался прежний ( или же заданный) цвет рамки/фона?