Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
JavaScript - Create an alert on clicking an HTML button
In this article, we will learn to create an alert by clicking an HTML button in JavaScript. JavaScript is extensively utilized to increase user interactions on web pages. One of the widespread usage scenarios is to display an alert on a button click.
What is an Alert in JavaScript?
An alert is a built-in JavaScript function that displays a small pop-up or a dialogue box window containing a message.
The syntax for using an alert is:
alert("Your message here");
This function pauses the execution of the script until the user dismisses the alert by clicking the "OK" button.
Creating an Alert Button in HTML and JavaScript
To fire an alert at the click of a button, we use addEventListener() method. Let's break down the process:
Steps to Handle Button Click Event
- Get a Reference to the Button: We use document.getElementById() to select the button element by its id.
- Add an Event Listener: The addEventListener method attaches a function to the button that will be executed when the button is clicked. In this case, the event is "click".
- Display the Alert: The alert function is a built-in JavaScript function that displays a pop-up message with the specified text.
Example
Below is an example of creating an alert by clicking an HTML button in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert Button Example</title>
</head>
<body>
<button id="alertButton" type="button">Please Press Me</button>
<script>
var pressedButton = document.getElementById("alertButton");
pressedButton.addEventListener("click", function(event) {
alert("You have pressed the button!");
});
</script>
</body>
</html>
Alternative Method Using onclick Attribute
You can also create an alert using the onclick attribute directly in the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert with onclick</title>
</head>
<body>
<button onclick="showAlert()" type="button">Click Me</button>
<script>
function showAlert() {
alert("Button clicked using onclick!");
}
</script>
</body>
</html>
Multiple Buttons with Different Alerts
Here's an example showing multiple buttons with different alert messages:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Alert Buttons</title>
</head>
<body>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
<script>
document.getElementById("btn1").addEventListener("click", function() {
alert("This is Button 1!");
});
document.getElementById("btn2").addEventListener("click", function() {
alert("This is Button 2!");
});
document.getElementById("btn3").addEventListener("click", function() {
alert("This is Button 3!");
});
</script>
</body>
</html>
Key Points
- The
alert()function blocks script execution until dismissed -
addEventListener()is the preferred method for attaching event handlers - Always ensure your HTML elements have unique IDs when using
getElementById() - Alert boxes are modal - they must be closed before the user can interact with the page
Conclusion
Creating alerts on button clicks is a fundamental JavaScript technique for user interaction. Use addEventListener() for better code organization and the alert() function to display simple messages to users.
5K+ Views
