Why the onclick not working in Javascript

Issue

I am trying to use onclick to call a function when user click the button, which seems not working.

For example:

function click(){
   console.log('you click it!')
}

<input type='button' id='submitbutton' value = 'Submit' onclick= 'click(); console.log("you used it in HTML")'>

if i remove the console.log in onclick, no message will be console.

function click(){
   console.log('you click it!')
}

<input type='button' id='submitbutton' value = 'Submit' onclick= "click();">

The button will console the message you used it in HTML which I directly write inside the onclick, but will fail to execute the function click() I assign to it.

I think it is not the problem of input[type='button'] since we could use onclick in input[type='button']. For example.

Could anyone explain me what makes the code doesn't work? I know the solution for this is probably to use addEventListener, but why doesn't this work?

Possible duplicate of JavaScript button onclick not working, but this question only suggests the solution not explaining the reason.

Thanks for any responds!

Solution

Inline handlers have a very, very peculiar scope chain - and for that reason (among others), should not be used, because their behavior can be unintuitive.

Here, click refers to the .click on HTMLElement's prototype:

<input type='button' id='submitbutton' value = 'Submit' onclick= 'console.log(click === HTMLElement.prototype.click)'>

So your function click and your inline click() are referencing different things. When you click:

• The inline handler will run HTMLElement.prototype.click on the button, resulting in a second event to be dispatched synchronously, which will once again trigger that same handler. It won't enter an infinite loop though, because .click() has a special flag to prevent exactly that to happen. Then, you used it in HTML gets logged.
• Once this second synthetic event has been handled, you used it in HTML will be logged again, from the inline handler.

Another way to look at it:

• Button click
  • Inline handler invoked due to click
    • Inline handler invoked again due to .click() in inline handler
      • Inline handler not invoked again (because the click in progress flag is raised)
      • Log occurs
    • Log occurs
• Call stack is now empty

Use a different name for the function - or, even better, avoid the inline handlers entirely.

Answered By - CertainPerformance