How to reuse a javascript function on the same page?

Question

Code:

   <script type="text/javascript">
    function flip() {
        $("#email_flip").on("click",function(e){
        $(".flipbox").flippy({
            color_target: "#F4F4F4",
            direction: "top",
            duration: "750",
            verso: "text1",
            onFinish: function(){

                    $("#back").on("click",function(e){
                        $(".flipbox").flippyReverse();
                        setTimeout(function() {
                        flip();
                        }, 1000);
                    });


         }
         });
         e.preventDefault();
        });
    }
    $(document).ready(function(){flip();});
    </script>
<script type="text/javascript">
$("#back").on("click",function(e){
    $(".flipbox").flippyReverse();
});
</script>

How can I reuse the above script on the same page but for with a different id for the click function and different content for the verso content.

I am using the following plugin: http://blog.guilhemmarty.com/flippy/

use a class instead of an ID for easier re-use – dandavis Aug 29 '13 at 20:41 — dandavis, Aug 29 '13 at 20:41

Paul · Answer 1 · 2013-08-30T02:38:53.610

Disclaimer: I wrote this without ever using or looking at the plugin. It needs to be tested and may need more work. For example, the function may have undesirable side effects on elements with class .flipbox that were set up by other calls to the function. All this provides is an example of how to write a function. Your specific problem might not be solved.

To start, wrap your code in function somename(your arguments){}.

Put this in a file and call it myflip.js

function myflip(clickID, backID, versoContent){
    function flip() {
        $(clickID).on("click",function(e){
        $(".flipbox").flippy({
            color_target: "#F4F4F4",
            direction: "top",
            duration: "750",
            verso: versoContent,
            onFinish: function(){

                    $(backID).on("click",function(e){
                        $(".flipbox").flippyReverse();
                        setTimeout(function() {
                        flip();
                        }, 1000);
                    });


         }
         });
         e.preventDefault();
        });
    }
    $(document).ready(function(){flip();});
    $(backID).on("click",function(e){
        $(".flipbox").flippyReverse();
    });
}

Refactoring note: function() { flip(); } appears repetitively and can often be refactored to simply flip without parenthesis, because flip is a function and we aren't rearranging parameters or doing anything with the anonymous wrapper. I'll leave tweaks like that to you.

Then in your html you'll need

<script src="myflip.js"></script>

And after that line you can use it from a script tag with:

<script>myflip("#email_flip","#back","text1"); </script>

though it is better to separate html and javascript by keeping all the javascript in .js files and importing those files with script tags.

How to reuse a javascript function on the same page?

1 Answers1