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
Post a Comment