Animation not playing for the second time

Question

I have an easy password box shake animation when the password is wrong but it doesn't play for the second time when I enter the wrong password. My logic is the following:

function passwordCheck(){
    var password = document.getElementById("passwordbox")
    var checkbox = document.getElementById("checkbox")
    var submittedPassword = password.value;
    
    if( submittedPassword == "abc"){
        
        location.href = "secret.html"
    }
    if(submittedPassword !== "abc"){
       checkbox.checked = false
       document.getElementById("passwordbox").style.animation = "shake 0.82s cubic-bezier(.36,.07,.19,.97) both"    
    }
}

This is my css animation:

@keyframes shake {
    8%, 41% {
        transform: translateX(-10px);
    }
    25%, 58% {
        transform: translateX(10px);
    }
    75% {
        transform: translateX(-5px);
    }
    92% {
        transform: translateX(5px);
    }
    0%, 100% {
        transform: translateX(0);
    }
}

check this https://stackoverflow.com/questions/6268508/restart-animation-in-css3-any-better-way-than-removing-the-element — Konstantin Samarin, Jan 21 '22 at 14:09
Just an observation, I assume this is just a little exercise and not code going into production site as it is not secure. — A Haworth, Jan 21 '22 at 15:22

Justiniscoding · Answer 1 · 2022-01-21T14:18:55.860

In your code, you are never removing the animation. You will want to remove it every time before you play the animation so it will play more than once. You can use the following code:

function passwordCheck(){
    var password = document.getElementById("passwordbox")
    var checkbox = document.getElementById("checkbox")
    var submittedPassword = password.value;
    
    if( submittedPassword == "abc"){
        
        location.href = "secret.html"
    }
    if(submittedPassword !== "abc"){
       document.getElementById("passwordbox").style.animation = "";
       checkbox.checked = false
       document.getElementById("passwordbox").style.animation = "shake 0.82s cubic-bezier(.36,.07,.19,.97) both"    
    }
}

I don't know why but it still doesn't seem to work. If it helps ,I call the passwordcheck function in this HTML code: `` — Shambu Kumar, Jan 21 '22 at 15:53

score 0 · Accepted Answer · answered Jan 22 '22 at 09:17

Fixed! my JS code looks like this now

function passwordCheck(){
    var password = document.getElementById("passwordbox")
    var checkbox = document.getElementById("checkbox")
    var submittedPassword = password.value;
    
    if( submittedPassword == "abc"){
        
        location.href = "secret.html"
    }
    if(submittedPassword !== "abc"){
        document.getElementById("passwordbox").style.animation = "shake 0.82s cubic-bezier(.36,.07,.19,.97) both";
        checkbox.checked = false
        document.getElementById('passwordbox').addEventListener("animationend" ,function restart(){document.getElementById("passwordbox").style.animation = "";})    
    }
}

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jan 22 '22 at 10:25

Animation not playing for the second time

2 Answers2