Trying to trigger a CSS animation with a button press through Javascript

Question

I'm trying to trigger a CSS animation with a button press by using Javascript. I've used other question and answers here, but to no avail. My code seems like it should work -- what am I missing? When I click the button, the background color of the div which I specify should change color over 2 seconds to light blue. I've tried changing the color of both my Body and my Test div, but nothing changes. My alert() triggers, which is confusing as it is in the same function as my colorChange.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>&lt;model-viewer&gt; example</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script>
      function colorChange() {
        alert("The button works");
        document.getElementByID('test').style.animation="changeColor";
      }
    </script>

    <style>
      body {
        background-color: darkblue;
        -webkit-transition: all 2s ease;
        -moz-transition: all 2s ease;
        -o-transition: all 2s ease;
        -ms-transition: all 2s ease;
        transition: all 2s ease;
      }
      
      .test {
        width: 500px;
        height: 500px;
        background-color: pink;
      }

      @keyframes changeColor {
        to {
          background-color: lightblue;
        }
      }
    </style>
  </head>

  <body id="body">
    <div class="test"></div>
    
    <button id="button" onclick="colorChange()">test animation</button>
  </body>
</html>

A Haworth · Accepted Answer · 2021-01-19 22:02:55Z

There are a couple of problems in the code.

The first is that there is no element with id 'test'. However, even when we change that to document.querySelector('.test') in order to get the element with class test, the animation does not fire.

The reason for this is that animations must have a time set otherwise 0s is assumed so it never runs.

Here is the altered code with the time set to 10s in the style.animation setting.

function colorChange() {
        //alert("The button works");
        document.querySelector('.test').style.animation="changeColor 10s";
      }

      body {
        background-color: darkblue;
        -webkit-transition: all 2s ease;
        -moz-transition: all 2s ease;
        -o-transition: all 2s ease;
        -ms-transition: all 2s ease;
        transition: all 2s ease;
      }
      
      .test {
        width: 500px;
        height: 500px;
        background-color: pink;
      }

      @keyframes changeColor {
        to {
          background-color: lightblue;
        }
      }

    <div class="test"></div>
    
    <button id="button" onclick="colorChange()">test animation</button>

harshdeeply · Accepted Answer · 2021-01-19 22:04:03Z

0

Firstly, There's a spelling error in your JS function. It should be 'getElementById'. Secondly, test is a class, not an id. Therefore, you should either change it to ID or use the function: 'document.getElementsByClassName("test")' or 'document.querySelector(".test")' to access it.

edited Jan 19, 2021 at 22:04

answered Jan 19, 2021 at 21:58

harshdeeply

991 silver badge5 bronze badges

1 Comment

dfvc Over a year ago

That's right but it still won't work because there's no element with id "test". There's one with class "test". You should rather use document.getElementByClassNameor document.querySelector;

Collectives™ on Stack Overflow

Trying to trigger a CSS animation with a button press through Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related