如何使用 HTML 按钮调用 JavaScript 函数?
我们使用 HTML 按钮的 onclick 事件属性来调用 JavaScript 函数。单击按钮时，将执行 onclick 属性中提供的 JavaScript 代码。HTML 中的 button 标签提供了各种属性，允许我们自定义按钮的功能，还可以让我们决定按钮如何触发以及触发什么。
方法 1:在 JavaScript 中使用 onclick 事件
按钮元素的 onclick 事件需要单击按钮时触发的 JavaScript 代码。因此，我们也将需要调用的函数放在 onclick 属性中。
语法
<button onclick = "fun()" >点击我 </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()。
方法 2:使用 JavaScript 中的 ondblclick 事件
提供了更多选项，以不同方式自定义 JavaScript 函数的执行。例如，我们还可以设置仅当双击按钮时才调用该函数。这可以通过按钮标签的"ondblclick"事件来实现。
语法
<button ondblclick = "fun()" >点击我
这将创建一个名为"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>
在上面的代码中，我们有一个"click me"按钮，双击该按钮时会触发 fun() 函数。
方法 3:使用输入按钮的 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()。
方法 4:使用 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 函数附加到其上的快速有效方法。
