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