Javascript, event handler cannot be named click

Question

Today I was implementing a click listerener and stumbled on the following:

function click (val) {
  console.log(val)
} 

function random (val) {
  console.log(val)
}

div:hover {
background-color: blue;
cursor: pointer;
}

<div onclick="click(1)">test1</div>
<div onclick="random(1)">test2</div>

The method for handling events cannot be named 'click'. Click is not a reserved keyword like for, if or while so why can't I use it? Are there any other function names which I cannot use?

Regarding "marked as duplicate". I don't see any mention of "click" as reserved name anywhere — Sid Vishnoi, Aug 16 '18 at 18:24
Would like to know why my function inamed click isn't working — Willem van der Veen, Aug 16 '18 at 18:25
This question have nothing to do about the one marked as duplicate... — Calvin Nunes, Aug 16 '18 at 18:26
it's not about javascript, because if you add the click listener in the JS instead of an HTML inline `onclick=...` it will work — Calvin Nunes, Aug 16 '18 at 18:29
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click method is getting called. — Arup Rakshit, Aug 16 '18 at 18:30
Oww, It call the click method with the onclick, I get it now thanks! — Willem van der Veen, Aug 16 '18 at 18:31
@zakaria-acharki This duplicate does not apply. The problem is not caused by a reserved keyword conflict. The problem is caused by the function on the `this` context overriding a function on the global object. [From review](https://stackoverflow.com/review/reopen/20608263). — georgeawg, Aug 16 '18 at 23:06
@WillemvanderVeen Saw your deleted question after it was deleted, https://stackoverflow.com/questions/51909146/single-page-application-spa-when-to-use-server-side-rendering . Don't be frustrated, this just isn't SO kind of question. Try https://webmasters.stackexchange.com/ . In short, your assumptions are correct. Google supports JS and SPAs as good as static websites, at least in theory. SEO may be == Google in some markets and != in other markets. — Estus Flask, Aug 18 '18 at 14:43
@estus thanks for the explaination! I deleted it because it got like 3 instant downvotes but I guess it was the wrong question to ask — Willem van der Veen, Aug 18 '18 at 15:30
You're welcome. The question seems to be worded reasonably well to me, just wrong place to ask. Such questions are usually closed with neutral votes, I agree that downvoting without any explanation isn't very constructive in this particular case. — Estus Flask, Aug 18 '18 at 15:58

score 1 · Accepted Answer · answered Aug 18 '18 at 14:51

onclick attribute code is evaluated within the context of DOM element it belongs to. Since an element has click function, it shadows click global.

An example:

<div onclick="
  console.log(
    typeof click === 'function', // true
    this.click === click, // true
    document.querySelector('div').click === click // true
  );
">test</div>

Situations like this one confirm that modern practice to avoid globals where possible and use addEventListener instead of onclick is justified.

Kind of already figured it out, but still thanks for your answer! — Willem van der Veen, Aug 18 '18 at 15:28

Javascript, event handler cannot be named click

1 Answers1