Javascript click Event only Triggers on Page Reload then does not work

Question

I am writing a small practice website. Relevant HTML:

...
<body>
    <div id="button">CLICK ME</div>
    <script src="assets/js/app.js"></script>
</body>
...

My app.js file has the following code:

document.querySelector("#button").addEventListener("click", new function() {
    alert("test");
});

When I reload the page, the event triggers. After that, clicking the div does nothing. What is causing this issue and how can I fix it?

Try removing the "new" keyword please. – Mohib Arshi Feb 27 '21 at 19:52 — Mohib Arshi, Feb 27 '21 at 19:52

score 2 · Answer 1 · answered Feb 27 '21 at 19:52

2

insead of new function() use only function

document.querySelector("#button").addEventListener("click", function() {
    alert("test");
});

answered Feb 27 '21 at 19:52

Met Br

634
5
9

Could you explain why there's a difference? – David De Martin Feb 27 '21 at 19:54
You can checkout the documentation here : https://developer.mozilla.org/en-US/docs/Web/API/EventListener And here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new – Met Br Feb 27 '21 at 19:57
Can you explain why it fires on load if you leave `new` in front of `function`? – codemonkey Feb 27 '21 at 20:03

score 2 · Accepted Answer · answered Feb 27 '21 at 20:01

The second parameter of addEventListener takes a reference to a function. Putting new in front, you create a new object and you apply an anonymous function as constructor. So the return value of it is an object instead of a function, which is what you need.

As such, your code would need to be (as pointed out by Met Byrdy):

document.querySelector("#button").addEventListener("click", function() {
    alert("test");
});

Just for fun though, I will give you a way to actually use new in that context. You can use the new Function syntax to do it:

document.querySelector("#button").addEventListener("click", new Function("alert('dsds')"));

Not that I recommend it, but thought you should know there is a way to write a function like that as well.

Reference: https://javascript.info/new-function

score 0 · Answer 3 · edited Feb 27 '21 at 20:05

addEventListener takes two arguments, the second argument is the function that you want the listener to invoke every time the event is triggered, in your case "click" event.

When you put "new" in front of the function it changes the function into a constructor function that creates a class instance ( returns an object ). That is why you need to use the function without the new keyword just like below.

document.querySelector("#button").addEventListener("click", function() {
    alert("test");
});

-- Edit --

You can check this stackoverflow issue

Javascript click Event only Triggers on Page Reload then does not work

3 Answers3