how to define a function to use it later in Jquery

Question

In plain Javascript, it is pretty easy to define a function then call it later, but I am still new to Jquery, can you help me out?

below is Plain Javascript, but I want to do this with Jquery

 <script> function displayMe(){document.getElementById('demo').innerHTML = "Display"}; </script> <button type="button" onclick="displayMe()"> Click me to add the word "Display" to the page. </button> <p id="demo"></p>

then here a working Jquery, but not what i want to do,

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script> <script> $(document).ready(function (){ $('#displayMe').click(function(){ $("#demo").html('Display'); }); }); </script> <button type="button" id="displayMe"> Click me to add the word "Display" to the page. </button> <p id="demo"></p>

and now my attempt to define and use later

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script> <script> $(document).ready(function (){ $('#displayMe').click(displayfunction(){ }); }); function displayFunction (){ $("#demo").html('Display') }; </script> <button type="button" id="displayMe"> Click me to add the word "Display" to the page. </button> <p id="demo"></p>

it shows the error in:

{
  "message": "Uncaught SyntaxError: missing ) after argument list",
  "filename": "https://stacksnippets.net/js",
  "lineno": 20,
  "colno": 41
}

i have tried to add )'s, just get other errors.

Answer 1

You need to pass displayFunction as a parameter for $('#displayMe').click()

 function displayFunction() { $("#demo").html('Display') } $(document).ready(function () { $('#displayMe').click(displayFunction); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" id="displayMe"> Click me to add the word "Display" to the page. </button> <p id="demo"></p>

Answer 2

You can just supply the function's name to the click handler, and the name is displayFunction , not displayfunction :

 $(document).ready(function() { $('#displayMe').click(displayFunction); }); function displayFunction() { $("#demo").html('Display') };

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script> <button type="button" id="displayMe"> Click me to add the word "Display" to the page.</button> <p id="demo"></p>

Or, simply use the onclick attribute like you did in your first example:

 function displayFunction() { $("#demo").html('Display') };

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script> <button type="button" id="displayMe" onclick="displayFunction()"> Click me to add the word "Display" to the page.</button> <p id="demo"></p>