-1

This is my code:

    const start = document.querySelector('#start');

function AnimationCaller(elParam, name, duration, count, fillMode){
    const element = document.querySelector(elParam);
    element.style.animationName  = name;
    element.style.animationDuration  = duration;
    element.style.animationIterationCount = count;
    element.style.animationFillMode= fillMode;
}

AnimationCaller('.circle-1', 'bounce', '3s', 'infinite');
AnimationCaller('.right-back-foo', 'scale', '6s', 'infinite');

start.addEventListener('click', AnimationCaller('.landing-page', 'slide', '2s', null, 'forwards'))

I want the "AnimationCaller" function to run when I click on the "start" object. However, when the page is loaded, "AnimationCaller" works automatically. What is the reason for this and how can I fix it?

Hashim Hashimli
  • 113
  • 3
  • 14
  • 1
    You need to wrap the call to your function in another function. – Pointy May 15 '21 at 11:53
  • Welcome to Stack Overflow! Visit the [help], take the [tour] to see what and [ask]. Please first ***>>>[Search for related topics on SO](https://www.google.com/search?q=eventlistener+too+soon+OR+early+site:stackoverflow.com)<<<*** – mplungjan May 15 '21 at 11:58

2 Answers2

0

Change this line

start.addEventListener('click', () => AnimationCaller('.landing-page', 'slide', '2s', null, 'forwards'))
Kabeer Jaffri
  • 652
  • 1
  • 9
  • 9
0

Your problem is that you call the function instead of passing a reference to it. Should be fixable by wrapping.

start.addEventListener('click', 
    function() { 
         AnimationCaller('.landing-page', 'slide', '2s', null, 'forwards')
    })
Wiktor Zychla
  • 47,367
  • 6
  • 74
  • 106