How to stop an animated image from sticking to top of page?

[Officer Erik 1K-88]

Well, I have this code that makes a clone of an image and this image has a CSS animation, but if I click the button to make the clone, then sometimes the clone gets stuck at the top of the screen, how would I fix that?

Here is the code:

<img id="spinFish" src="assets/img/sprite/Fishy Boii.svg" alt="Spining Fishy Boii"> <!-- The original of the clones -->

<button id="clickBtn" onclick="clickFish()">
    <img id="clickImage" src="assets/img/sprite/Fishy Boii.svg" alt="A Fishy Boii">
</button> <!-- The button that creates the clones -->

/* The CSS to the button */
#clickBtn {
    outline: none;
    border: none;
    background: none;
    width: 303px;
    height: 190px;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: 1.2s;
}

#clickBtn:hover {
    width: 343px;
    height: 230px;
}

#clickBtn:active {
    width: 283px;
    height: 170px;
    transition: 0.4s;
}

#clickImage {
    width: 100%;
    height: 100%;
}

/* CSS to the original of the clones */
#spinFish {
    display: none;
    animation: moveDown 5s linear 1;
    position: absolute;
    top: 0;
    left: 50%;
    width: 5%;
    z-index: -1;
}
@keyframes moveDown {
    0% {
        top: 0%;
        transform: rotate(0deg);
        opacity: 1;
    }
    25% {
        top 25%;
        transform: rotate(90deg);
        opacity: 0.75;
    }
    50% {
        top: 50%;
        transform: rotate(180deg);
        opacity: 0.5;
    }
    75% {
        top: 75%;
        transform: rotate(270deg);
        opacity: 0.25;
    }
    100% {
        top: 100%;
        transform: rotate(360deg);
        opacity: 0;
        display: none;
    }
}

// The random number generator
function getRndInteger(type, min, max) {
    if (type == "whole") {
        return Math.floor(Math.random() * (max - min + 1) ) + min;
    } else if (type == "decimal") {
        return (Math.random() * (max - min + 1) ) + min;
    }
}

// The JavaScript to the button
function clickFish() {
    var ncRandLoc = getRndInteger("whole", 20, 80);
    const node = document.getElementById("spinFish");
    const clone = node.cloneNode(true);
    clone.style.left = String(ncRandLoc) + "%";
    clone.style.display = "inline";
    document.body.appendChild(clone);
}

Fishy Boii image:

Screenshot of the problem:

The problem only happens if you click the button fast, if you click it slowly then it doesn't really happen as badly as clicking it fast.

 

[Officer Erik 1K-88]

I believe that I have fixed it by adding setTimeout(function(){clone.remove();}, 5000);, to the javascript to the button, I put right after the .appendChild().

 

[MeMate]

Stop using const within a function.
Or try it like this

const node = document.getElementById("spinFish"); //const is a global constance. Can't be changed nor overwritten as you do in your previous function. So of course it fails if you click to fast. Check your console.

function clickFish() {
    var ncRandLoc = getRndInteger("whole", 20, 80);
    var clone = node.cloneNode(true); //var instead of const. Even let should'nt be used here
    clone.style.left = String(ncRandLoc) + "%";
    clone.style.display = "inline";
    document.body.appendChild(clone);
}