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")'>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!
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:
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.you used it in HTML will be logged again, from the inline handler.Another way to look at it:
.click() in inline handler
Use a different name for the function - or, even better, avoid the inline handlers entirely.
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")'>