如何使用HTML按钮调用JavaScript函数？

我们使用 onclick 事件属性来调用JavaScript函数的 HTML按钮 . 当按钮被点击时，提供的JavaScript代码将在 onclick 属性中执行。在HTML的 button 标签中提供了多种属性，我们可以使用这些属性来定制按钮的功能，决定按钮如何以及什么时候触发。

方法一：使用JavaScript中的onclick事件

按钮元素的 onclick 事件期望触发JavaScript代码，当按钮被点击时执行。因此，我们也将需要调用的函数放在 onclick 属性中。

语法

<button onclick = "fun()" > Click Me </button>

这将创建一个名为“click me”的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()" > 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>

在上述代码中，当”click me”按钮被双击时，它会触发fun()函数。

第三种方法：使用输入按钮的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”附加到它上面。注意这个附加事件发生在整个文档成功渲染之后。

头部标签中的脚本导入了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>