数据结构
网络
关系型数据库管理系统 (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+ 浏览量
