how do i change a css property after a time interval of 3 seconds using javascript?

Question

this is the javascript code i've been using. and i keep getting the error

    '''
    cannot set property 'animationplaystate' of undefined.
    '''

    '''
    window.setTimeout(function time(){
      var run=document.getElementsByClassName('logo');
      run.style.animationplaystate='paused';
     }, 3000);
    '''

below is the style of the element

'''
.logo{
color: rgb(0, 158, 150);
float:right;
padding-right:0px;
font-weight: 600;
padding-top:5px;
margin-right: 20px;
font-size: 2em;
padding-left: 30px;
animation-name:logo;
animation-duration: 1.5s;
animation-play-state: running; 
}

'''

is this code below the tag or above the tag ? reason I am asking your code is running before the tag is actually rendered, use jQuery document ready event and set the CSS — Dickens A S, Mar 29 '20 at 02:58

score 0 · Answer 1 · edited Mar 29 '20 at 16:27

0

run.style['animation-play-state'] = 'paused';

edited Mar 29 '20 at 16:27

double-beep

5,031
17
33
41

answered Mar 29 '20 at 02:56

Ron

5,900
2
20
30

Please don't post only code as answer, but also include an explanation what your code does and how it solves the problem of the question. Answers with an explanation are generally of higher quality, and are more likely to attract upvotes. – Mark Rotteveel Mar 29 '20 at 08:43

Dickens A S · Answer 2 · 2020-03-29T11:39:39.097

0

As per the documentation Mozilla Developer Network

The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s)

so techniclly getElementsByClassName always return an array
You need use array index to access the elements
Also the style attribute is camel case animationPlayState
in your code all are in small letters

Try this code

run[0].style.animationPlayState = 'paused'

To start animation and stop animation purely using CSS you can try

.logo {
  animation-play-state: paused; 
}

.logo:hover {
  animation-play-state: running;
}

so, for your case, you don't even need javascript

edited Mar 29 '20 at 11:39

answered Mar 29 '20 at 03:11

Dickens A S

3,824
2
22
45

can you give me the html tag I will create a jsfiddle – Dickens A S Mar 29 '20 at 11:20
come to chat -- chat.stackoverflow.com – Dickens A S Mar 29 '20 at 11:21
i know that it returns an array ,but here there is only one element inside that class name ....well we'd assume that it's gonna take it as a single element by default. – Joel Joseph Mar 29 '20 at 11:22
that is why I put zero `run[0]` , does it throw error for undefined ? – Dickens A S Mar 29 '20 at 11:24
in google chrome console you can directly type javascript to check that particular element is coming or not – Dickens A S Mar 29 '20 at 11:26
I can invite you let me do it – Dickens A S Mar 29 '20 at 11:29
come to this room https://chat.stackoverflow.com/rooms/17/javascript – Dickens A S Mar 29 '20 at 11:31
ok i have this logo that appears from above on loading the page within a time frame of 2s, and i want the logo to transform 360deg in x-axis when the cursor hovers above the logo and it works fine but as soon as the cursor moves away from the logo ...... the logo seems to animate from above again . i don't want this . – Joel Joseph Mar 29 '20 at 11:31
i don't have enough reputations on stackoverflow. – Joel Joseph Mar 29 '20 at 11:32
ok, I understood, you can use :hover CSS to set animation, so normal `.logo` should not be linked with animation – Dickens A S Mar 29 '20 at 11:34
use this example https://codepen.io/valhead/pen/rfump, start animation on hover which is `animation-play-state: running;` which will work, in the normal css class set `animation-play-state: paused; ` – Dickens A S Mar 29 '20 at 11:36
to whom where ? – Dickens A S Mar 29 '20 at 12:55

AymericFi · Answer 3 · 2020-03-29T19:17:00.527

From what I know:

The DOM is not ready yet for the browser API to tell JavaScript more. Window setTimeout is executed before DOM is ready (before window.onload).

You are facing this p.b: Javascript document.getElementsByClassName returning undefined

my answer is to wrap in window.load (or document.ready):

window.addEventListener("load", function() 
{
    // code here
});

Consider document ready too. window.onload vs $(document).ready()

how do i change a css property after a time interval of 3 seconds using javascript?

3 Answers3