CSSアニメーションが2度目のトリガーにならない

Question

私はちょっとした試合をしています。愚かなことだが、私はこのランダムなイベントがポップアップして、少しCSSのキーフレームアニメーションをしたい。最終的な目標は、ランダムイベントがトリガーされたときにポップアップさせ、アニメーションが終了したときに離れることです。コードを実行すると、最初に動作させることができますが、2回目にアニメーションがトリガーされず、テキストのみが表示されます。何か案は？

var myFood = document.getElementById("myFood"); 
 
var myWood = document.getElementById("myWood"); 
 
var myGold = document.getElementById("myGold"); 
 
var myButton = document.getElementById("myButton"); 
 
var output = document.getElementById("output"); 
 
var randomFoodEvent = document.getElementById("event"); 
 

 
var foodCount = 0; 
 
var woodCount = 0; 
 
var goldCount = 0; 
 

 
myButton.addEventListener("click", buttonClick, false); 
 

 
window.addEventListener("keydown", keydownHandler, false); 
 

 
function keydownHandler(event) { 
 
    console.log("keyCode = " + event.keyCode); 
 
    if (event.keyCode === 13) { 
 
    buttonClick(); 
 
    } else if (event.keyCode === 70) { 
 
    foodCount++; 
 
    myFood.innerHTML = "<strong>F</strong>ood: " + foodCount; 
 
    var randomFoodNum = Math.floor(Math.random() * 100) + 1; 
 
    if (randomFoodNum === 50) { 
 
     randomFoodEvent.className = "playEvent"; 
 
     randomFoodEvent.innerHTML = "Some villagers stole your food!"; 
 
     foodCount = foodCount - 25; 
 
    } 
 
    } else if (event.keyCode === 87) { 
 
    woodCount++; 
 
    myWood.innerHTML = "<strong>W</strong>ood: " + woodCount; 
 
    } else if (event.keyCode === 71) { 
 
    goldCount++; 
 
    myGold.innerHTML = "<strong>G</strong>old: " + goldCount; 
 
    } 
 
} 
 

 
randomFoodEvent.addEventListener("animationend", function() { 
 
    randomFoodEvent.classList.remove = "playEvent"; 
 
    randomFoodEvent.innerHTML = ""; 
 
}); 
 

 
function buttonClick() { 
 
    console.log("Button Clicked!"); 
 
    if ((foodCount >= 100) && (woodCount >= 100) && (goldCount >= 100)) { 
 
    output.textContent = "You win!"; 
 
    } 
 
}

/* The animation code */ 
 

 
@keyframes example { 
 
    from { 
 
    background-color: red; 
 
    } 
 
    to { 
 
    background-color: yellow; 
 
    } 
 
} 
 

 

 
/* The element to apply the animation to */ 
 

 
.playEvent { 
 
    animation-name: example; 
 
    animation-duration: 4s; 
 
}

<h1>Buttons and Keyboard Events</h1> 
 
<p id="output"> 
 
    Get 100 Food, 100 Wood, and 100 Gold to Win the Game! 
 
</p> 
 
<p id="myFood"><strong>F</strong>ood: 0</p> 
 
<p id="myWood"><strong>W</strong>ood: 0</p> 
 
<p id="myGold"><strong>G</strong>old: 0</p> 
 

 
<p id="event"> 
 

 
</p> 
 

 
<button id="myButton">Click Me to Win</button>

申し訳ありませんが、コードの多くがあることを、私は全部を表示せずにやろうとしているかを示すためのより良い方法を考えることができませんでした。

ありがとうございます！

EDIT：相続人JSFiddle

Answer 1

構文エラーrandomFoodEvent.classList.remove("playEvent");

var myFood = document.getElementById("myFood"); 
 
var myWood = document.getElementById("myWood"); 
 
var myGold = document.getElementById("myGold"); 
 
var myButton = document.getElementById("myButton"); 
 
var output = document.getElementById("output"); 
 
var randomFoodEvent = document.getElementById("event"); 
 

 
var foodCount = 0; 
 
var woodCount = 0; 
 
var goldCount = 0; 
 

 
myButton.addEventListener("click", buttonClick, false); 
 

 
window.addEventListener("keydown", keydownHandler, false); 
 

 
function keydownHandler(event) { 
 
    console.log("keyCode = " + event.keyCode); 
 
    if (event.keyCode === 13) { 
 
    buttonClick(); 
 
    } else if (event.keyCode === 70) { 
 
    foodCount++; 
 
    myFood.innerHTML = "<strong>F</strong>ood: " + foodCount; 
 
    var randomFoodNum = Math.floor(Math.random() * 100) + 1; 
 
    if (randomFoodNum === 50) { 
 
     randomFoodEvent.className = "playEvent"; 
 
     randomFoodEvent.innerHTML = "Some villagers stole your food!"; 
 
     foodCount = foodCount - 25; 
 
    } 
 
    } else if (event.keyCode === 87) { 
 
    woodCount++; 
 
    myWood.innerHTML = "<strong>W</strong>ood: " + woodCount; 
 
    } else if (event.keyCode === 71) { 
 
    goldCount++; 
 
    myGold.innerHTML = "<strong>G</strong>old: " + goldCount; 
 
    } 
 
} 
 

 
randomFoodEvent.addEventListener("animationend", function() { 
 
    randomFoodEvent.classList.remove("playEvent"); 
 
    randomFoodEvent.innerHTML = ""; 
 
}); 
 

 
function buttonClick() { 
 
    console.log("Button Clicked!"); 
 
    if ((foodCount >= 100) && (woodCount >= 100) && (goldCount >= 100)) { 
 
    output.textContent = "You win!"; 
 
    } 
 
}

/* The animation code */ 
 

 
@keyframes example { 
 
    from { 
 
    background-color: red; 
 
    } 
 
    to { 
 
    background-color: yellow; 
 
    } 
 
} 
 

 

 
/* The element to apply the animation to */ 
 

 
.playEvent { 
 
    animation: example 4s 1; 
 
}

<!doctype.html> 
 
<html> 
 

 
<head> 
 
    <title> 
 
    Keyboards and Buttons 
 
    </title> 
 
</head> 
 

 
<body> 
 
    <h1>Buttons and Keyboard Events</h1> 
 
    <p id="output"> 
 
    Get 100 Food, 100 Wood, and 100 Gold to Win the Game! 
 
    </p> 
 
    <p id="myFood"><strong>F</strong>ood: 0</p> 
 
    <p id="myWood"><strong>W</strong>ood: 0</p> 
 
    <p id="myGold"><strong>G</strong>old: 0</p> 
 

 
    <p id="event"> 
 

 
    </p> 
 

 
    <button id="myButton">Click Me to Win</button> 
 
</body> 
 

 
</html>