JavaScript 如何检查按钮是否被点击

在本文中，我们将看到如何使用JavaScript检查按钮是否被点击。有两种方法可以检查按钮是否被点击，即使用onclick事件和click事件。

方法1：使用onclick事件： 首先，我们将创建一个按钮，然后使用document.querySelector()选择按钮元素，然后应用onclick事件来检查按钮是否被点击。

示例：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to check a button is clicked  
        or not in JavaScript?  
    </title> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
          
        input[type="button"] { 
            padding: 5px 10px; 
            margin-top: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h3> 
        How to check a button is clicked  
        or not in JavaScript?  
    </h3> 
  
    <input type="button" class="button"
        value="Button" 
        onclick="myGeeks()" > 
  
    <script> 
        function myGeeks() { 
            document.querySelector(".button").onclick = function() { 
                alert("Button Clicked"); 
            } 
        } 
    </script> 
</body> 
  
</html>

输出：

JavaScript 如何检查按钮是否被点击

方法2：使用点击事件： 首先，我们将创建一个按钮，然后使用document.querySelector()来选择按钮元素，然后应用addEventListener()和点击事件来检查按钮是否被点击。

例子：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to check a button is clicked  
        or not in JavaScript?  
    </title> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        input[type="button"] { 
            padding: 5px 10px; 
            margin-top: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h3> 
        How to check a button is clicked  
        or not in JavaScript?  
    </h3> 
  
    <input type="button" class="button"
        value="Button" 
        onclick="myGeeks()" > 
  
    <script> 
        function myGeeks() { 
            document.querySelector(".button") 
                .addEventListener("click", function() { 
                    alert("Button Clicked"); 
                }); 
        } 
    </script> 
</body> 
  
</html>

输出：

JavaScript 如何检查按钮是否被点击