如何使用 addEventListener 'keydown' 逐个字母地检查？

Question

我正在尝试检查我输入的字母是真是假。

例如，我有一个从数组中捕获的字符串，执行 join(' '):

"问题测试javascriptcsspc"

我当前的代码：

document.addEventListener('keydown', (event) => {

  let count = 0
  let charlist = "problem test javascript css pc"

for(let i = 0; i < charlist.length; i++){
  if(charlist[i] === event.key){
    count++
    console.log(count)
  }

}

 })

当我输入“s”时数为 2，当我输入“t”时数为 3，没有序列..

我需要的是只检查第一个字母“p”并计数 1 return true，键入字母“r”计数 1 return true

我该如何测试？

Answer 1

这是您可以遵循的示例。首先，您将短语存储为一个数组，并且对于每个 keydown，将 event.key 与匹配短语数组的 counter 索引的字母进行比较。对于每个正确键入的字母，您都会增加计数器。查看此代码以了解其工作原理

let keycounter = 0,
  correct = 0,
  wrong = 0;
let response = document.querySelector('.response')
let completed = document.querySelector('.completed')
document.addEventListener('keydown', (event) => {

  let count = 0
  let charlist = "problem test javascript css pc";
   if (charlist.split('')[keycounter] === event.key) {
    completed.innerHTML += event.key
    correct++;
    keycounter++

    response.innerHTML = event.key + ' was correct';
  } else {
    wrong++;
    response.innerHTML = event.key + ' was wrong';
  }

  response.innerText += ' - ' + correct + ' right/' + wrong + ' wrong so far'

  if (correct === charlist.split('').length) response.innerText += +"<br> FINISHED";

})

.completed:empty, .response:empty{
display:none;
}

.completed, .response{
margin:5px 0;
padding:5px;
background:#f0f0f0;
}

.response{
color:#666;
}

<p>Click in this area and type in this phrase <strong>problem test javascript css pc</strong></p>

<div class='completed'></div>
<div class='response'></div>

Answer 2

与不同的方法是使用当前计数比较字符串的当前字符。

let count = 0

document.addEventListener('keydown', (event) => {

  let mystring = "problem test javascript css pc"
  
  for(let i = count; i < mystring.length; i++){
    if(event.key == mystring.charAt(i)){
      console.log('correct character')
      count++
      break;
    }
    if (event.key != mystring.charAt(count+1)) {
      console.log('wrong character')
      break;
    } 
  }

})

<div>problem test javascript css pc</div>
<input style="margin-top: 10px;" class="typebox" placeholder="type here..."></div>

如何使用 addEventListener 'keydown' 逐个字母地检查？

How to check letter by letter using addEventListener 'keydown'?

html

javascript

arrays

string

keydown