addEventListener function works at the beginning without being fired

Question

So here are my HTML codes:

document.getElementById("sub").addEventListener("click", testing());
function testing() {
 document.getElementById("demo").innerHTML ="good"; 
}

<input type="submit" value="Place Order" id="sub"/>
    </fieldset> </form>
    <p id="demo"></p>
    <script type="text/javascript" src="Q4.js"></script>

In which I declared a button to submit the form. I added an event to the submit button to run the function testing(). I expected that when the user clicks on the button submit, the page will prompt "good". But, as soon as I load the page, "good" already appeared without clicking in the button. result page

Why does this happen?

In the `.addEventListener()` call, `testing()` should be just `testing`. Your code as it stands *calls* the function and then passes the return value to `.addEventListener()`. — Pointy, Nov 07 '18 at 19:30
JavaScript evaluates arguments eagerly. If you have `foo(bar())`, then `bar` is called first and it's return value is passed to `foo`. — Felix Kling, Nov 07 '18 at 19:57

score 2 · Answer 1 · answered Nov 07 '18 at 19:31

2

Change this line :

document.getElementById("sub").addEventListener("click", testing());

to

document.getElementById("sub").addEventListener("click", testing);

answered Nov 07 '18 at 19:31

Ajay Gaur

4,400
4
31
49

André DS · Accepted Answer · 2018-11-07T20:05:20.867

2

You should remove parentheses to prevent function testing() to be executed. Just put the name of the function.

You can find more details and simple example of listener here.

Here is a working snippet :

/*file javaScript Q4.js*/
document.getElementById("sub").addEventListener("click", testing);
function testing() {
document.getElementById("demo").innerHTML ="good"; }

<input type="submit" value="Place Order" id="sub"/>
</fieldset> </form>
<p id="demo"></p>
<script type="text/javascript" src="Q4.js"></script>

You can also put your function directly into your listener, like this :

document.getElementById("sub").addEventListener("click", function() {
    document.getElementById("demo").innerHTML="good"; 
});

About the bug that "show the good word for a second only" : Clicking the button causes the form to be submitted, which means the page reloads or the loads the URL in action. That means that all temporary changes that JavaScript made in the current page load are gone. Thanks Felix Kling

edited Nov 07 '18 at 20:05

answered Nov 07 '18 at 19:31

André DS

1,521
1
11
23

I tried to do so. But then it's kinda weird. I clicked "place order" then I saw the "good" pop up for 1sec and then disappears again. So is that a problem from my browser? – Duke_ngn Nov 07 '18 at 19:35
@Duke_ngn That's a bug that probably came from another part of your code. Can you please share a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve), or more code ? :) – André DS Nov 07 '18 at 19:36
There is nothing much left in my codes. The button is in a fieldset of a form. The other parts are just a table and a textbox. – Duke_ngn Nov 07 '18 at 19:49
The Q4.js contains only those 3 lines ? – André DS Nov 07 '18 at 19:50
What browser are you using ? Is my snippet showing you the same bug ? – André DS Nov 07 '18 at 19:52
Yes. Cause I am just playing around with innerHTML and EventListener function – Duke_ngn Nov 07 '18 at 19:52
I am using google Chrome on my Mac. I don't know why but your snippet is totally perfect ! – Duke_ngn Nov 07 '18 at 19:53
Nice then, try to clear your cache and restart your browser, I'm also using Chrome on MacOS :) If answers helps, don't forget to `plus` them and mark one of them as `answer`. – André DS Nov 07 '18 at 19:54
1

@Duke_ngn: *"The button is in a fieldset of a form."* Clicking the button causes the form to be submitted, which means the page reloads or the loads the URL in `action`. That means that all temporary changes that JavaScript made in the current page load are gone. The example here works likely because you posted incomplete HTML and thus the button isn't actually inside a `
`.
– Felix Kling Nov 07 '18 at 20:01
Oh @FelixKling you're right of course ! I'll add your precisions to the answer and credit you. – André DS Nov 07 '18 at 20:02
so what if i still want to include my button inside my form. What should I do to prevent the page to be loaded again and causes that problem ? – Duke_ngn Nov 07 '18 at 21:08
Here is some help : https://stackoverflow.com/a/8664680/7415107 – André DS Nov 07 '18 at 21:09

Pankaj Parkar · Answer 3 · 2018-11-07T19:45:51.790

2

addEventListener function accept two parameters

Event name
Callback function
options (optional)

So you had called function inspite of passing function reference there.

Write it down to like below

document.getElementById("sub").addEventListener("click", testing);

OR

document.getElementById("sub").addEventListener("click", function testing() {
    document.getElementById("demo").innerHTML ="good"; 
})

edited Nov 07 '18 at 19:45

answered Nov 07 '18 at 19:34

Pankaj Parkar

127,691
20
213
279

Out of curiousity, is there any reason to still name the function if you're using it as a closure? – War10ck Nov 07 '18 at 19:41
1

@War10ck yupe, you can see the function name in stacktrace, easy to understand what you're being debugging and better readability :) – Pankaj Parkar Nov 07 '18 at 19:42
1

Great point! I didn't think of that. +1 – War10ck Nov 07 '18 at 20:07

Smollet777 · Answer 4 · 2018-11-07T19:48:42.123

1

You don't need parenthesis.

document.getElementById("sub").addEventListener("click", testing);

edited Nov 07 '18 at 19:48

answered Nov 07 '18 at 19:30

Smollet777

1,515
1
13
15

1

you mean parenthesis – Isaac Vidrine Nov 07 '18 at 19:47

addEventListener function works at the beginning without being fired

4 Answers4