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!

CodePudding user response：

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 recursive call (because the button has an onclick property). The recursive call will not be entered into a second time. Then, you used it in HTML gets logged.
• Outside the recursive call, in the inline handler, you used it in HTML will be logged again.

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 engine can see that the previous .click invoked from the native method is still on the stack)
      • Log occurs
    • Log occurs
• Call stack is now empty

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

CodePudding user response：

Hi The error is this: click() is a javascript function, change the name to other. More information: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

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

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