Question

我有一个简单的JS应用程序，如果用户猜到了声音，它会增加一个计数器。增量有效，但是如果用户按住Enter键，分数会一直上升直到释放键，我该如何避免这种情况，以便他只得分一分，并且如果他尝试以相同的声音再次按Enter，计数器将停止添加一点？

我尝试添加一个boolean值，但是它不起作用，这是我的JavaScript：

var sounds = [
  {
    animalType: 'horse',
    sound: new Audio('../sounds/Horse-neigh.mp3')
  },
  {
    animalType: 'bear',
    sound: new Audio('../sounds/grizzlybear.mp3')
  },
  {
    animalType: 'goat',
    sound: new Audio('../sounds/Goat-noise.mp3'),
  },
  {
    animalType: 'cat',
    sound: new Audio('../sounds/cat.mp3')
  },
  {
    animalType: 'dog',
    sound: new Audio('../sounds/dog-bark.mp3')
  },
  {
    animalType: 'sheep',
    sound: new Audio('../sounds/sheep.mp3')
  },
  {
    animalType: 'rooster',
    sound: new Audio('../sounds/rooster.mp3')
  },
  {
    animalType: 'lion',
    sound: new Audio('../sounds/lion.mp3')
  },
  {
    animalType: 'hen',
    sound: new Audio('../sounds/hen.mp3')
  }
]

var player = document.getElementById('player');
var enteredWord = document.getElementById('entered-word');
var counter = document.getElementById('counter-score');
var errorMessage = document.getElementById('error-message');
var wrongAnswerSound = new Audio('../sounds/Wrong-answer-sound-effect.mp3');
var isEntered = false;

function startGame() {
    var currentSound;
    player.addEventListener('click', function() {
    var sound = sounds[Math.floor(Math.random()*sounds.length)];
    currentSound = sound.animalType;
    sound['sound'].play();
  })


  enteredWord.addEventListener('keydown', function() {
    if(event.key === 'Enter') {
      if(enteredWord.value.toLowerCase() === currentSound && !isEntered) {
        counter.textContent ++;
        isEntered = true;
        errorMessage.style.display = 'none';
        enteredWord.classList.remove('input-error-border');
        console.log(soundPlayedCount)
      } else {
        errorMessage.style.display = 'inline-block';
        enteredWord.classList.add('input-error-border');
        wrongAnswerSound.play();
      }  
      isEntered = false;
    } 
  })
}

startGame();

Answer 1

您放错了以下作业：

isEntered = false;

它应该在else块中。您现在拥有的位置，即使您刚刚将其设置为isEntered，它也将始终false true。 ;）

我也建议您监听input事件（而不是keydown），因为通过鼠标拖放进行输入更改时，input事件也会触发，或通过上下文菜单（例如，粘贴）或其他输入设备。

Answer 2

另一种实现方法是使用keyup而不是keydown，这样，每次他释放琴键，分数就会增加。由于现在的问题是当他继续按下键时，keydown侦听器会继续执行。

enteredWord.addEventListener('keyup', function() {})

Answer 3

我会尝试这样做：收听change而不是keydown。触发时，将disabled属性添加到输入中。准备好再次接受输入时，请删除disabled属性。

请注意

“ [oninput和onchange之间的区别是oninput事件在元素的值已更改（例如，每次按键后），而当内容更改后，元素会失去焦点。另一个区别在于onchange事件也适用于元素。”

防止Enter键不断增加计数器

3 个答案: