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

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

Итак, словесное описание задачи:
есть условная схема клавиатуры, сделанная с помощью 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; }

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

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

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

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

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

pkey = document.getElementById('key_code_113');

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

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
	}
}

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

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

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

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

<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>

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

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;

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

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

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

Ну, для нескольких то клавиш можно запилить отдельные обработчики уже с тем самым кейсом :yes:

Mitrandir, не меняй цвет вообще. Лучше добавляй/удаляй класс, а уже в css раскрашивай его. Это истинный путь. А у тебя шлак.

Хорошо попробую, спасибо.
А какая от этого выгода по сокращению кода, так сказать?

Выгода в первую очередь в порядке. Когда оформление в css, а не в js - тогда порядок )

Понял, спасибо. Но, это нынче второй вопрос, а первый: каким макаром например квадратную скобку обработать?
danik.js можете код выкатить?

так не всегда получается делать, иногда только через js удобно стили задавать.

Так или иначе, вы все мне очень помогли.
Всем спасибо и хорошего вечера пятницы :)

Вот то, что ты реализуешь: http://dmauro.github.io/Keypress/

Спасибо за ссылку.
Конечно, хотелось обойтись "голым" js, но знать не судьба :)

Выковырял клавиатуру, методом "резать-клеить".
Да, не те нынче времена, без помощи библиотек редко когда управишься...