How to call JS function with jQuery using animate.css

Question

I am using animate.css library.

I have this Javascript function

function animationClick(element, animation){
element = $(element);
element.click(
    function() {
        element.addClass('animated ' + animation);
        window.setTimeout( function(){
            element.removeClass('animated ' + animation);
        }, 600);         

    });

}

I have this jQuery call

$(document).ready(function(){
$("#startButton").click(function() {
    animationClick(this, 'pulse');
});

});

This is my html

<input id="startButton" class="btn contained animated fadeInDown" type="button" id="startButton" value="Start!"></input>

What i have tried, i have tried adding onclick="" to my html button, and calling the function directly, nothing seemed to work.

I thought something was wrong with the animation, so i tried to do a simple .hide instead but my jQuery still hasn't worked

I've looked online and made sure my pages are calling each other properly, such as <link rel="stylesheet" href="animation.css"> and <script src="play.js"></script>

I have also tried to import jQuery versions by downloading it locally and calling the file <script src="jquery-3.3.1.min.js"></script> Help appreciated

An update:

I have checked the page console and this message appears: Uncaught ReferenceError: $ is not defined at play.js:92 Line 92 is $(document).ready(function () { I'm thinking this is an importing of jQuery issue, but i have already imported it. Isn't the import correct?

Answer 1

You can try this code.

$(document).ready(function(){
$(document).on("click","#startButton",function() {
    $(this).addClass('animated pulse');
        window.setTimeout( function(){
            $(this).removeClass('animated pulse');
     }, 600);    
});
});

No need to call a function you can add and remove class directly on click event of jQuery!!

Answer 2

<script type="text/javascript" src="./jquery-3.3.1.min.js"></script>
<script type="text/javascript">

$("#startButton").on("click", function() {
   $(this).addClass('animated pulse');
        window.setTimeout( function(){
        $(this).removeClass('animated pulse');
   }, 600);    
 });

</script>

This is how your code should look, maybe your loading your jquery after your dom function.