将 class 添加到元素以在 Z9E13B69D1D2DA927Z7777102ACAAAF7154A3 中运行 CSS animation

Question

I'm trying to add my CSS animation class to an element when triggered by the js code. JS:

 if (document.getElementById("user").value == "test"
   && document.getElementById("pass").value == "test")
    {
        alert( "Welcome back!" );
    }
    else {
        document.getElementById("fail").className += "animation";
    }

The animation won't play when the onclick event listener is triggered. The 'if' part of the statement works correctly but the 'else' part will not run.

CSS:

.animation {
    animation: shake 1s;

}

@keyframes shake {


      25% { transform: translate(10px)}
      50% { transform: translate(-10px)}
      75% { transform: translate(10px)}
      100% { transform: translate(-10px)}


}

Relevant HTML:

                        <!--LOGIN-->

                    <div id="fail">

                        <p>My Account</p>

                        <p id="note">Username must be between 6 and 10 characters. <br/>Password must be at least 5 characters contain at least one letter and number.</p>
                        <form id="login">

                            <input type="text" placeholder="Username" id="user"/>

                            <br/>

                            <input type="password" placeholder="Password" id="pass"/>

                            <br/>

                            <input onclick="login()" type="submit" value="Submit">
                        </form>

                    </div>

Answer 1

change the submit input attribute type = button.

submit will initiate a request and refresh the page, the animation will not be seen.

Answer 2

U might be putting your script in your login function which submit the form as soon as clicked and reload the page. Try this script...

document.getElementById("login").addEventListener("submit", function (e) {
  e.preventDefault();
  if (
    document.getElementById("user").value == "test" &&
    document.getElementById("pass").value == "test"
  ) {
    alert("Welcome back!");
  } else {
    document.getElementById("fail").className += "animation";
  }
});

Answer 3

You need to define load and click events before to add the CSS class.

Try it with the next code and provide feedback please.

<script>
  addEventListener("load", eventClick);

  function eventClick() {
    document.getElementById("user").addEventListener("click", addClass);
  };

  function addClass() {
    var e = document.getElementById("user");
    e.classList.add("animation");
  };
</script>

Answer 4

ppcoding's solution does work, but in a lot of cases with forms, you do want them to submit—even if you aren't using the built in GET or POST methods for submissions.

Especially for collaboration with other developers, using a <button> with type="submit" is better, so that it's clear that it submits the information.

When doing some kind of custom submission function, you should use preventDefault() on the event:

function login(e) {
  e.preventDefault()
  // ... continued code
}

Also, it's not recommended to use event listeners in the HTML. It's better to put it in your JavaScript:

<!-- HTML Before -->
<form>
  // other inputs
  <input onclick="login()" type="submit" value="Submit">
</form>

<!-- HTML After -->
<form id="login">
  // other inputs
  <button type="submit">Submit</button>
</form>

// JavaScript
const loginForm = document.querySelectorAll('#login')

loginForm.addEventListener('submit', e => {
  e.preventDefault()
  // ... login
})

I know there was already a solution, but for those that are looking to make their code more professional, this is how you do it.