為什么onclick在Javascript中不起作用-有解無憂

我試圖在用戶單擊按鈕時onclick呼叫 a function，這似乎不起作用。

例如：

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

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

如果我洗掉console.login onclick，則不會有任何訊息console。

顯示代碼片段

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

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

該按鈕會console顯示you used it in HTML我直接在中寫入的訊息onclick，但無法執行click()我分配給它的功能。

我認為這不是問題，input[type='button']因為我們可以onclick在input[type='button']. 對于例子。

誰能解釋一下是什么讓代碼不起作用？我知道對此的解決方案可能是使用addEventListener，但為什么這不起作用？

JavaScript button onclick not working可能重復，但這個問題只提出了解決方案，沒有解釋原因。

感謝您的任何回應！

uj5u.com熱心網友回復：

行內處理程式有一個非常非常奇特的作用域鏈——因此（除其他外）不應使用，因為它們的行為可能不直觀。

這里，.click指的是.clickon HTMLElement 的原型：

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

所以你function click和你的行內click()正在參考不同的東西。單擊時：

行內處理程式將HTMLElement.prototype.click在按鈕上運行，導致遞回呼叫（因為按鈕具有 onclick 屬性）。不會再次進入遞回呼叫。然后，you used it in HTML被記錄。
在遞回呼叫之外，在行內處理程式中，you used it in HTML將再次被記錄。

另一種看待它的方式：

為函式使用不同的名稱 - 或者，更好的是，完全避免使用行內處理程式。

uj5u.com熱心網友回復：

嗨錯誤是這樣的：click()是一個javascript函式，將名稱更改為其他。更多資訊：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")'>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/402440.html

標籤：