javascript - How to enhance such piece of code -



javascript - How to enhance such piece of code -

i'm working on kind of typing tutor now. have simple keyboard model written in pure html. html here

<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> <span class="key" id="r">r<sub>К</sub></span> </div> </div>

then want alter color of border of key pressed. i've create such piece of "trashcode" in javascript

document.onkeypress = checkkeypress; 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; case 101: pkey = document.getelementbyid("e"); pkey.style.bordercolor = "red"; break;

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

and on. can see, guys, question is: how can avoid spaghetti "case" statement , write code pretty , clear read?

demo on http://codepen.io/anon/pen/ulhyi

function checkkeypress(e) { var keyid = string.fromcharcode(e.charcode).tolowercase(); document.getelementbyid(keyid).style.border = "solid red"; } document.onkeypress = checkkeypress;

javascript html dom

Comments

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -