Apply 'keypress' function() to next <span> element once the 'keypress' has changed the class of the selected <span> element
Question
I have taken a string and created a <span> for each letter in the string. My goal is to iterate through the spans, take into account the keypress feed back and determine if the keypress is 'correct' or 'incorrect'. Once the appropriate class has been assigned, I would like to preform the same keypress function on the next span element. I can't figure out how to move to the second span. The class applies, but any additional key feedback continues to apply to the first <span> element
example: <span>e</span> <span>x</span> <span>a</span> <span>m</span> <span>p</span> <span>l</span> <span>e</span>
window.addEventListener('keypress', function(event){
var $current = document.querySelector('span')
var $next = document.querySelector('span').nextSibling
if ($activeChar === event.key) {
$current.classList.remove('current')
$current.classList.add('right')
} else {
$current.classList.remove('current')
$current.classList.add('wrong')
}
return $next.classList.add('current')
})
I am very new to Javascript and I apologize in advance for my lack of understanding, but I want to learn. I have referenced the JS books that I have and searched high and low. I haven't found a solution that I am able to implement on my own. Many thanks
2 answers
solution1
0 ACCPTED 2017-06-10 20:07:04
instead of defining the keypresses inside of the event listener take the following for a spin:
var out = document.getElementById("output"); document.onkeydown = function(e){ if(e.keyCode == 65) out.innerHTML = "a"; if(e.keyCode == 66) out.innerHTML = "b"; if(e.keyCode == 67) out.innerHTML = "c"; };
<body> <span id="output">press either the a, b, or c key</span> </body>
the following uses e.keyCode which is fancy for "key value". I find this much easier to do and if you need a list just look at this keycode info
For you're purpose:
var out = document.getElementById("output"); var subedKey; var chosenKey; function start(){ var rand = Math.floor(Math.random() * 3 + 1); switch(rand){ case 1: chosenKey = "a"; out.innerHTML = "press the a key"; break; case 2: chosenKey = "b"; out.innerHTML = "press the b key"; break; case 3: chosenKey = "c"; out.innerHTML = "press the c key"; break; default: console.log("no key was chosen"); }; } start(); document.onkeydown = function(e){ if(e.keyCode == 65){ out.innerHTML = "a"; subedKey = "a";} if(e.keyCode == 66){ out.innerHTML = "b"; subedKey = "b";} if(e.keyCode == 67){ out.innerHTML = "c"; subedKey = "c";} if(subedKey == chosenKey){ out.innerHTML = "correct"; }else{ out.innerHTML = "incorrect"; } window.setTimeout(start, 2000); };
<body> <span id="output">the letter is:</span> </body>
solution2
0 2017-06-10 20:11:06
You had a few problems with your code.
First, you would have always selected the first element, and not the current one, so I added a class to your span, and select by it. Second, you're not defining $activeChar Third, nextSibling won't return what you expect. nextElementSibling will
window.addEventListener('keypress', function(event) { var $current = document.querySelector('span.current') var $next = $current.nextElementSibling var $activeChar = $current.innerText if ($activeChar === event.key) { $current.classList.remove('current') $current.classList.add('right') } else { $current.classList.remove('current') $current.classList.add('wrong') } return $next.classList.add('current') })
.current { background-color: blue; } .right { background-color: green; } .wrong { background-color: red; }
<span class='current'>e</span> <span>x</span> <span>a</span> <span>m</span> <span>p</span> <span>l</span> <span>e</span>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.