CODEWITHSUNDEEP
javascripthtmlcssclassanimation
qbkiller12
qbkiller12

Reputation: 3

Adding a class to an element to run CSS animation in Javascript

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>

Upvotes: 0

Views: 1327

Answers (4)

andrilla
andrilla

Reputation: 721

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.

Upvotes: 0

Xavin
Xavin

Reputation: 66

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>

Upvotes: 0

Gourav Saini
Gourav Saini

Reputation: 677

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";
  }
});

Upvotes: 0

ppcoding
ppcoding

Reputation: 51

change the submit input attribute type = button.

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

Upvotes: 1

Related Questions