CODEWITHSUNDEEP
javascriptjquery
aaron lilly
aaron lilly

Reputation: 274

how to define a function to use it later in Jquery

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.

Upvotes: 0

Views: 219

Answers (2)

Denis O.
Denis O.

Reputation: 1850

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>

Upvotes: 2

Djaouad
Djaouad

Reputation: 22766

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>

Upvotes: 1

Related Questions