Question

我已经取了一个字符串，并为字符串中的每个字母创建了一个。我的目标是遍历跨度，考虑按键反馈并确定按键是否正确＆＃39;或者＆＃39;不正确＆＃39;。一旦分配了适当的类，我想在下一个span元素上执行相同的按键功能。我无法弄清楚如何进入第二个跨度。该类适用，但任何其他关键反馈仍继续适用于第一个元素

例如： 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

而不是在事件监听器内部定义按键，而不是旋转：

＆＃13;

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";
};

＆＃13;

<body>
<span id="output">press either the a, b, or c key</span>
</body>

＆＃13;

以下使用e.keyCode，它对＃34;键值＆＃34;很有吸引力。我觉得这样做更容易，如果你需要一个列表，只需看看keycode info

为了您的目的：

＆＃13;

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

＆＃13;

<body>
<span id="output">the letter is:</span>
</body>

＆＃13;

Answer 2

您的代码存在一些问题首先，您总是选择第一个元素，而不是当前元素，因此我在您的范围中添加了一个类，并按其选择。其次，你没有定义$activeChar 第三，nextSibling不会返回您的期望。 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>

应用＆＃39;按键＆＃39;按下＆＃39;按键＆＃39;一旦函数（）到下一个<span>元素已更改所选<span>元素的类

2 个答案: