So, I have a button that plays a coinflip animation. The problem is if I push the button and get a result I got before, it wont play the GIF again. (Gifs are only meant to run once per button press).
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p>My paragraph.</p>
<p id="flipDisplay"></p>
<button onclick="display()">Flip the Coin!</button>
<script>
function coinFlip() {
return (Math.floor(Math.random() * 2) == 0);
}
function display() {
if (coinFlip()) {
var img = document.createElement('img');
img.src = "./tflip.gif";
showImage(img);
} else {
var img = document.createElement('img');
img.src = "./ctflip.gif";
showImage(img);
}
}
function showImage(img){
var display = document.getElementById("flipDisplay");
display.innerHTML = '';
display.appendChild(img);
}
</script>
</body>
</html>
Also, its pronounced Gif not Gif.
