資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 HTML 按鈕呼叫 JavaScript 函式？
我們使用 HTML 按鈕的 `onclick` 事件屬性來呼叫 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+ 瀏覽量
