JavaScript Alert Message Code Generator | Custom Popup Alerts


JavaScript Alert Message Code Generator helps you quickly generate clean and ready-to-use alert() message code without writing it manually. Simply enter your message, customize the behavior, and instantly copy the JavaScript code. This tool is ideal for beginners, developers, and testers who need quick popup alerts for form validation, notifications, or debugging purposes.

What Is a JavaScript Alert Message?

JavaScript alert messages are simple popup dialogs used to display important information to users. They are commonly used for warnings, confirmations, notifications, and debugging during development.

Create Alert Code

This generator saves time by instantly creating correct JavaScript alert code. You don't need to remember syntax or (double " quotes and ' single quotes) worry about errors just enter your message and copy the generated code.

You can add your message in plain text or HTML code.

Show alert :
?Choose when the alert message should appear: on button click or when the page loads.
?Add button name
×
?Add your message HTML / text

Preview

HTML and JavaScript Code

HTML inline script code

HTML
<button onclick="alert('hello world!')">click me</button>

HTML and JavaScript

HTML + JavaScript
<button id="alert-button">click me</button>

<script>
(() => {
	let btnAlert = document.getElementById("alert-button");
	// add your message here
	let message = "hello world!";
	btnAlert.addEventListener("click", event => {
		alert(message);
	});
})();
</script>

How to Show Alert on Page Load

JavaScript Alert on Page Load Using window.onload

The window.onload event runs after the entire page content has fully loaded, including images and stylesheets.

HTML
<script>
window.onload = function () {
  alert("Welcome to our website!");
};
</script>

JavaScript Onload Alert Using DOMContentLoaded

This method triggers the alert as soon as the HTML document is loaded, without waiting for images.

HTML
<script>
document.addEventListener("DOMContentLoaded", function () {
  alert("Page content loaded!");
});
</script>

HTML Body Onload Alert Message

You can also trigger an alert directly using the onload attribute in the <body> tag.

HTML
<body onload="alert('Hello! Page loaded successfully');">

⚠️ Note: Inline JavaScript is not recommended for modern projects.

JavaScript Delayed Onload Alert

To delay the alert after the page loads, use setTimeout().

HTML
<script>
window.onload = function () {
  setTimeout(function () {
    alert("This alert appears after 3 seconds");
  }, 3000);
};
</script>

How to Alert an Array in JavaScript

JavaScript does not display arrays properly inside an alert by default. To show array values, you must convert them into a readable format.

JavaScript Alert Array Values

When you alert an array directly, JavaScript automatically converts it to a comma-separated string.

JavaScript
const vegetables = ["Carrot", "Broccoli", "Spinach", "Tomato"];
alert(vegetables);
Try it yourself

Method 1: Using join()

JavaScript
const codes = ["HTML", "CSS", "JavaScript", "PHP", "Python"];
alert(codes.join(" | "));
Try it yourself

Method 2: Using toString()

JavaScript
const fruits = ["Apple", "Banana", "Mango", "Strawberry"];
alert(fruits.toString());
Try it yourself

How to Alert an Object in JavaScript

Objects cannot be displayed directly in an alert. You need to convert them into a string format.

JavaScript Alert Object Data

Alerting an object without conversion shows [object Object].

JavaScript
const user = { name: "John", age: 30 };
alert(user);
// ouptut: [object Object]
Try it yourself

Method 1: Using JSON.stringify()

JavaScript
const user = {
  name: "John",
  age: 30,
  country: "USA"
};

alert(JSON.stringify(user));
Try it yourself

Method 2: Pretty Format (Readable Output)

JavaScript
const user = {
  name: "John Doe",
  age: 28,
  email: "john.doe@example.com",
};

alert(JSON.stringify(user, null, 4));
Try it yourself