1
var season = "10";

$( document ).ready(function() {
    $("#table").hide();
});

$('#searchButton').on("click", showTable(event));

function showTable(event){
    $("#table").show();
    document.getElementById("td").innerHTML = season;     
}

How is it possible, that the function showTable(event) is automatically executed when the page is loaded? Another problem is, that the click event doesn't work if the button is clicked. What did I do wrong?

Bene
  • 95
  • 8
  • 1
    By putting parenthesis in the `onclick` call, you're invoking the function to be passed as a variable, Try something like: `$('#searchButton').on("click", showTable);` – faino Mar 15 '16 at 21:52

3 Answers3

4

How is it possible, that the function showTable(event) is automatically executed when the page is loaded?

Because you are calling the function: showTable(event). () after a function reference means to execute the function. You are calling showTable and passing the return value (undefined) to .on().

Here is a simplified example:

function foo() {
  return 42;
}

function bar(x) {
  console.log(x);
}

bar(foo());

This calls the function foo, and passes its return value (42) to bar, which in turn logs the value.

If we'd write bar(foo) instead, we'd pass the function itself and bar could execute the function.

What did I do wrong?

You are calling the function. Pass it to .on instead and let the browser call it:

$('#searchButton').on("click", showTable);
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • A working solution, but a small caveat to this solution is that if your click handler has other parameters being passed to it, you cannot use it this way, it must be done how my answer shows. – mhodges Mar 15 '16 at 21:55
  • Sure, different problems have different solutions. – Felix Kling Mar 15 '16 at 21:56
  • Yeah, I was just mentioning to the OP - I wasn't the downvoter. You have a perfectly viable solution to the proposed question – mhodges Mar 15 '16 at 21:59
  • It works just fine. Thank you! – Bene Mar 15 '16 at 22:05
3

The line:

$('#searchButton').on("click", showTable(event));

Actually executes showTable(event). What you want is:

$('#searchButton').on("click", showTable);

Why?

When you have $('#searchButton').on("click", showTable(event));, what is sent to the .on() is the result of the showTable(event) function execution.

If you use $('#searchButton').on("click", showTable);, what you send as second argument to the .on() function now is a reference to the showTable function, not its result.

acdcjunior
  • 132,397
  • 37
  • 331
  • 304
  • A working solution, but a small caveat to this solution is that if your click handler has other parameters being passed to it, you cannot use it this way, it must be done how my answer shows. – mhodges Mar 15 '16 at 21:54
  • Sure, *if*. That doesn't seem to be the case, though. – acdcjunior Mar 15 '16 at 21:57
  • Yeah, I was just mentioning to the OP - I wasn't the downvoter. You have a perfectly viable solution to the proposed question – mhodges Mar 15 '16 at 22:00
1

By saying showTable(event), you are invoking the function.

What you need to do is this:

$('#searchButton').on("click", function (event) {
  showTable(event)
});
mhodges
  • 10,938
  • 2
  • 28
  • 46
  • A working solution, but one small caveat to this solution is that the event variable in the OPs question does nothing making it unnecessary to use this syntax ;) – Wesley Smith Mar 15 '16 at 23:29