資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 HTML 按鈕呼叫 JavaScript 函式？
我們使用 HTML 按鈕的onclick 事件屬性來呼叫 HTML 按鈕 的 JavaScript 函式。當點選按鈕時，在onclick 屬性中提供的 JavaScript 程式碼將執行。HTML 中的button標籤提供了各種屬性，允許我們自定義按鈕的功能，並讓我們決定按鈕觸發的方式和內容。
方法一：在 JavaScript 中使用 onclick 事件
按鈕元素的onclick事件期望觸發點選按鈕時觸發的 JavaScript 程式碼。因此，我們將需要呼叫的函式也放在onclick屬性中。
語法
<button onclick = "fun()" > Click Me </button>
這將建立一個名為“點選我”的 HTML 按鈕，並觸發“fun()”函式。
示例 1
在這裡，我們將使用 HTML 按鈕來呼叫 JavaScript 函式。當點選按鈕時，相關的函式體將執行。讓我們來看一下相應的程式碼。
<!DOCTYPE html> <html> <title>Online Javascript Editor</title> <head> </head> <body> <script> function fun() { document.getElementById("result").innerHTML = "The function fun() is triggered !"; } </script> Calling js function using HTML button <br><br> <button onclick = "fun()"> click me !</button> <p> <div id = "result"> </div> </p> </body> </html>
在上面的程式碼中，當點選按鈕時將觸發函式 fun()。
方法二：在 JavaScript 中使用 ondblclick 事件
提供了更多選項以不同方式自定義 JavaScript 函式的執行。例如，我們還可以將函式設定為僅在雙擊按鈕時呼叫。這可以透過按鈕標籤的“ondblclick”事件來完成。
語法
<button ondblclick = "fun()" > Click Me
這將建立一個名為“Button_Name”的 HTML 按鈕，並在雙擊按鈕時觸發“fun()”函式。
示例 2
在這裡，我們將使用 HTML 按鈕來呼叫 JavaScript 函式。當雙擊按鈕時，相關的函式體將執行。
<!DOCTYPE html> <html> <title>Online Javascript Editor</title> <head> </head> <body> <script> function fun() { document.getElementById("result").innerHTML = "The function fun() is triggered !"; } </script> <h3>Calling js function using HTML button <br></h3> <p> Double click "click me!" button </p> <button ondblclick = "fun()"> click me ! </button> <p> <div id = "result"> </div> </p> </body> </html>
在上面的程式碼中，我們有一個“點選我”按鈕，雙擊時會觸發 fun() 函式。
方法三：使用 input 按鈕的 onclick 事件
按鈕也可以是執行某種驗證和表單提交的表單的一部分。也可以使用 HTML 提供的input標籤建立按鈕。再次配置onclick事件屬性來處理按鈕的行為。
語法
<input type = "button" onclick = "fun()" value = "Button_Name" >
這將建立一個名為“Button_Name”的 HTML 按鈕，並觸發“fun()”函式。
讓我們來看一個例子來說明這個用例。
示例 3
我們將建立一個用於提交模擬表單的按鈕，此按鈕將觸發onclick屬性中提供的 JavaScript 函式。
<!DOCTYPE html> <html> <title>Online Javascript Editor</title> <head> </head> <body> <script> function fun() { document.getElementById("result").innerHTML = "The function fun() is triggered !"; } </script> Calling js function using HTML button <br><br> <form> <label> Name : </label> <input type = "text"> </input><br><br> <input type = "button" onclick = "fun()" value = "submit"> </form> <p> <div id = "result"> </div> </p> </body> </html>
在上面的程式碼中，當點選提交按鈕時將觸發函式 fun()。
方法四：使用 jQuery
作為替代方案，我們還可以使用jQuery以程式設計方式將函式附加到按鈕。
語法
$(document).ready(function() {
$('#Your_Button').click(function() {
fun();
});
});
此 jQuery 指令碼檢查文件的準備情況，然後將函式 fun() 附加到 id 為“Your_Button”的按鈕的點選事件。
讓我們來看一個例子來說明這個用例。
示例 4
我們將建立一個 HTML 按鈕，並使用 jQuery 以程式設計方式向其附加“onclick”事件處理程式。注意，此附加操作發生在成功渲染完整文件之後。
head 標籤中的指令碼匯入 jQuery。
<!DOCTYPE html> <html> <title>Online Javascript Editor</title> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> Calling js function using HTML button <br><br> <button id="button"> click me !</button> <p> <div id="result"> </div> </p> <script> $(document).ready(function() { $('#button').click(function() { fun(); }); }); function fun() { document.getElementById("result").innerHTML = "The function fun() is triggered !"; } </script> </body> </html>
結論
HTML 按鈕的onclick屬性是將 JavaScript 函式附加到它們的一種快速有效的方法。
58K+ 瀏覽量
