JavaScript window.alert
last modified April 2, 2025
In this article, we explore the window.alert method in JavaScript.
This method displays an alert dialog with a specified message and an OK button.
It's one of the simplest ways to show information to users.
Basic Definition
The window.alert method displays a modal dialog with a message and
an OK button. The dialog is modal, meaning it pauses script execution until the
user dismisses it.
The method takes a single parameter - the message to display. The message is
converted to a string if it isn't one already. The window prefix
is optional, so you can use just alert().
Basic Alert
This example demonstrates the simplest usage of the alert method.
<!DOCTYPE html>
<html>
<head>
<title>Basic Alert</title>
</head>
<body>
<button onclick="showAlert()">Show Alert</button>
<script>
function showAlert() {
alert("This is a basic alert message!");
}
</script>
</body>
</html>
In this basic example, we have a button that triggers an alert when clicked. The alert displays the text "This is a basic alert message!" with an OK button.
This demonstrates the fundamental usage of alert() to show simple
messages to users. The dialog is modal and blocks interaction with the page
until dismissed.
Alert with Variables
This example shows how to include variable values in alert messages.
<!DOCTYPE html>
<html>
<head>
<title>Alert with Variables</title>
</head>
<body>
<button onclick="showAlert()">Show Alert</button>
<script>
function showAlert() {
const userName = "John Doe";
const items = 5;
alert(`Hello ${userName}! You have ${items} items in your cart.`);
}
</script>
</body>
</html>
Here we use template literals to include variable values in the alert message.
The variables userName and items are inserted into
the string.
This demonstrates how to create dynamic alert messages by combining static text with variable values. Template literals (using backticks) make this easy.
Alert with Line Breaks
This example demonstrates how to create multi-line alert messages.
<!DOCTYPE html>
<html>
<head>
<title>Multi-line Alert</title>
</head>
<body>
<button onclick="showAlert()">Show Alert</button>
<script>
function showAlert() {
alert("First line of text\nSecond line of text\nThird line");
}
</script>
</body>
</html>
In this example, we use the newline character \n to create line
breaks in the alert message. This results in a multi-line alert dialog.
This shows how to format alert messages for better readability. The \n
escape sequence is the standard way to insert line breaks in JavaScript strings.
Alert with User Input
This example demonstrates using alert after getting user input.
<!DOCTYPE html>
<html>
<head>
<title>Alert with Input</title>
</head>
<body>
<input type="text" id="nameInput" placeholder="Enter your name">
<button onclick="greetUser()">Greet Me</button>
<script>
function greetUser() {
const name = document.getElementById('nameInput').value;
alert(`Hello, ${name || 'stranger'}!`);
}
</script>
</body>
</html>
Here we get user input from a text field and display it in an alert message. If the input is empty, we use a default greeting ("stranger").
This demonstrates how alerts can be used to provide feedback based on user
input. The logical OR operator (||) provides a fallback value.
Alert for Form Validation
This example shows using alert for simple form validation.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<form onsubmit="return validateForm()">
<input type="email" id="email" placeholder="Enter your email">
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
const email = document.getElementById('email').value;
if (!email.includes('@')) {
alert('Please enter a valid email address!');
return false;
}
return true;
}
</script>
</body>
</html>
In this example, we check if the entered email contains an '@' symbol. If not, we show an alert and prevent form submission by returning false.
This demonstrates using alerts for simple validation feedback. While alerts are not ideal for production validation, they work for quick prototypes.
Source
MDN window.alert Documentation
In this article, we have shown how to use window.alert in JavaScript.
While simple, alert dialogs remain useful for debugging and quick user feedback.
Author
List all JS DOM tutorials.