Click handler is running on page load and not receiving event despite passing it

Question

I have the following code

document
      .getElementById("myButton")
      .addEventListener("click", myFunction(event));   

function myFunction(event) {
      alert("Click Event!");
      event.preventDefault();
    }

<btn id="myButton">Donate Now</span>

Html:

<btn id="myButton">Click Me</btn>

Javascript:

document
    .getElementById("myButton")
    .addEventListener("click", myFunction(event));   

function myFunction(event) {
    alert("Click Event!");
    event.preventDefault();
}

The click event is being run on page load without console error and not on click event! .

I need to prevent a button' click event so I have to pass the event to do it.

And when I click on the button it doesn't run the event handler but gives console error of

Uncaught TypeError: Cannot read property 'preventDefault' of undefined

Despite me clearly passing the event. Surely if it runs this at page load without me wanting to it should be consistent and give the same error there?

I need to solve:

Not fire the click event on page load
The click event should not throw console error when clicked upon

You are *calling* the function, not passing it.`.addEventListener("click", myFunction)` — Niet the Dark Absol, Jul 16 '20 at 08:53
@NiettheDarkAbsol that is the code I have. You haven't changed anything. I have to pass the event to prevent a default form submit. — greay, Jul 16 '20 at 08:56
No, it is not the code you had, and the difference between `foo` and `foo()` in JavaScript is absolutely fundamental. If you are not aware of it, then maybe you should go read up on some basics, instead of giving the people that point out your problem attitude. — CBroe, Jul 16 '20 at 09:04
https://stackoverflow.com/questions/15886272/what-is-the-difference-between-a-function-call-and-function-reference — CBroe, Jul 16 '20 at 09:06
@CBroe Thanks for the link. As I understand it is that javascript expect a reference without the `()`. Instead of throwing an error when it gets the `()` when adding it to the event listener it will call the function as soon as it encounters it. From a language design point I would prefer javascript to throw an error as debugging more complicated situations where you make a typo will be really difficult. — greay, Jul 16 '20 at 09:14
But this **is not** an error. You are simply doing a _different_ thing than you actually intended to. `.addEventListener( "click", foo() )` is a perfectly valid use case - in this case, the function `foo` would need to _return_ a function reference itself, and _that_ function would then be bound as the callback function for this event. — CBroe, Jul 16 '20 at 09:18
@CBroe you are right, working with backend languages I got conditioned to strict rules and errors before runtime. My failure was my conditioned thinking. Javascript is designed very different. — greay, Jul 16 '20 at 12:49

score 1 · Accepted Answer · answered Jul 16 '20 at 08:55

1

It's because you are calling the function instead of binding the event callback :

try like this :

document.getElementById("myButton").addEventListener("click", myFunction);

function myFunction(event) {
  alert("Click Event!");
}

<button id="myButton">Click Me</button>

answered Jul 16 '20 at 08:55

A.RAZIK

434
3
8

The solution might be correct but your statement that I am calling the function at page load is incorrect. I am merely passing the event. – greay Jul 16 '20 at 09:03
NO YOU ARE NOT. YOU ARE CALLING THE FUNCTION AND PASSING A NON-EXISTENT `event` PARAMETER. – Niet the Dark Absol Jul 16 '20 at 09:05
@NiettheDarkAbsol The only place where I reference the code is `.addEventListener("click", myFunction(event)); `. I am binding the function to the click event. I am NOT binding it to the page on load event. For him to claim "I am calling the function is incorrect" as I am binding the function. – greay Jul 16 '20 at 09:08
`myFunction(event)` is CALLING the function!!!!!!!! – Niet the Dark Absol Jul 16 '20 at 09:35
@NiettheDarkAbsol Lets settle on, if you have "()" after a function there will be no error and the browser and will call it as soon as it finds it i.e. page load. – greay Jul 16 '20 at 12:53

Click handler is running on page load and not receiving event despite passing it

1 Answers1