1

I am a beginner and having a problem with calling functions that I create on JavaScript or jQuery.

if i use this, it works:

$("#objectId").click(function(){
    alert("Clicked on objectId")
}

however if I pre-define a function and call it onclick it doesn't work

function alertOnClick(objectToClick) {
    alert("Clicked on " + objectToClick)
}
$("#objectId").click(alertOnClick("objectId"))

in this case, it gives the alert when the page is loaded and it does not alert on click.

What am I doing wrong syntax-wise and why?

Thank you very much

text machina
  • 11
  • 4
  • It should be either `$("#objectId").click(function() { alertOnClick("objectId") })` or `$("#objectId").click(alertOnClick)` and `alert("Clicked on " + this.id)` within the function. – H77 Aug 24 '18 at 02:03

2 Answers2

1

Because you are calling the function alertOnClick instead of passing it as reference

You should be doing something like this:

$("#objectId").click(alertOnClick)

function alertOnClick(ev) {
    alert("Clicked on " + ev.target.id);
}

When you do $("#objectId").click(alertOnClick("objectId")) you are calling the alertOnClick method with objectId as parameter before the click event happens. What you should do is pass the reference of the method so it is called when the click event happens.

f-CJ
  • 4,235
  • 2
  • 30
  • 28
  • thank you. do you have a blog post link or a recommended resource that I can read to further grasp the differences between reference to a method and calling a function and which should be used on a click event? I now know what to do, but just as a memorization rather than learning/understanding it – text machina Aug 24 '18 at 03:32
  • @textmachina Sure, stackoverflow has many questions/answers related to the subject. You can check this one for example: https://stackoverflow.com/questions/6466031/how-to-pass-a-callback-as-a-parameter-into-another-function or this one: https://stackoverflow.com/questions/13286233/pass-a-javascript-function-as-parameter. Hope it helps. – f-CJ Aug 24 '18 at 11:40
1

To achieve this, you need to return a function from alertOnClick as shown:

function alertOnClick(objectToClick) {
  return function() {
    alert("Clicked on " + objectToClick)
  }
}

Which will allow you to do the following:

$("#objectId").click(alertOnClick("objectId"))

Here's a working code sample to see it in action: 

function alertOnClick(objectToClick) {
  return function() {
    alert("Clicked on " + objectToClick)
  }
}

$("#objectId").click(alertOnClick("objectId"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
</script>
<button id="objectId">Object Id</button>
Dacre Denny
  • 29,664
  • 5
  • 45
  • 65
  • isn't `function() {...}` used to define a one-use function on the spot? this way you define a function that returns a function? why can't I use the function in the first place? thank you – text machina Aug 24 '18 at 03:34
  • Hi @textmachina, yes - function() {..} is used to define a function on the stop. In javascript however, it is also valid to have a function (ie the outer) that returns a new function (ie the inner) as shown in my answer. In the case of my answer, when setting up `$("#objectId").click(alertOnClick("objectId"))` the outer function is getting called immedialty with argument 'objectId'. Calling `alertOnClick('objectId')` results in a new function being returned to the `click` handler - the neat thing about this is that the returned function is parameterised by the outer function. Hope this helps! – Dacre Denny Aug 24 '18 at 04:18