一旦 'keypress' 更改了所选 元素的 class，将 'keypress' function() 应用于下一个 元素

Question

我获取了一个字符串并为字符串中的每个字母创建了一个 。我的目标是遍历跨度，考虑按键反馈并确定按键是 'correct' 还是 'incorrect'。一旦分配了适当的 class ，我想在下一个 span 元素上执行相同的按键功能。我不知道如何移动到第二个跨度。 class 适用，但任何其他关键反馈继续适用于第一个  元素

示例： e x a m p l e

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

我对Javascript很陌生，对于我的理解不足，我提前表示歉意，但我想学习。我参考了我拥有的 JS 书籍，并进行了高低搜索。我还没有找到可以自己实施的解决方案。非常感谢

Answer 1

不要在事件侦听器中定义按键，而是采用以下方法：

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>

以下使用 e.keyCode，这对 "key value" 来说很有趣。我发现这更容易做到，如果您需要列表，请查看此 keycode info

你的目的：

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>

Answer 2

您的代码存在一些问题。
首先，您总是 select 编辑第一个元素，而不是当前元素，所以我在您的跨度中添加了一个 class，并在其旁边添加了 select。其次，你没有定义 $activeChar 第三，nextSibling 不会 return 您所期望的。 nextElementSibling 将

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>

一旦 'keypress' 更改了所选 <span> 元素的 class，将 'keypress' function() 应用于下一个 <span> 元素

Apply 'keypress' function() to next <span> element once the 'keypress' has changed the class of the selected <span> element

javascript

loops

keypress

repeat