Question

我正在编写一个简单的JavaScript游戏，在该游戏中，用户单击播放声音的div，如果他们认为动物的声音正确，则计数器会记录其得分和增量。
它可以工作，但是如果再次播放相同的声音，并且用户猜测它会以两个而不是一个，有时甚至是三个来递增计数器，而我不知道为什么和如何解决它，这是我的HTML：

<div id="counter">Score:<span id="counter-score"> 0</span> </div>

这是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'),
    }
];

var player = document.getElementById('player');
var enteredWord = document.getElementById('entered-word');
var counter = document.getElementById('counter-score');

startGame();


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

        enteredWord.addEventListener('keydown', function() {
            if (event.key === 'Enter') {
                if (enteredWord.value === currentSound) {
                    counter.textContent++;
                }
            } else {

            }
        });
    });
}

为什么会这样？

我尝试使用+ =运算符，但结果相同。

Answer 1

正如@Ibu在评论中所说，每次点击事件发生时，都会向keydown事件中添加一个新的事件侦听器。

您应该在enteredWord.addEventListener回调之外提取player.addEventListener部分，就像这样：

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 === currentSound) {
        counter.textContent ++;
      }
    }
  })
}

Answer 2

您好，您可以用该代码替换您的代码吗，我认为key-down事件正在执行两次，所以您遇到了这个问题。

enteredWord.addEventListener('keydown', function(e) {        
     if( (e.keyCode ==13) && (enteredWord.value === currentSound)){
          e.stopImmediatePropagation();         
          counter.textContent ++;
      }
  })

计数器增加两次

2 个答案: