How To Create An Alert Box In Javascript

Get AI Code Completions for Your IDE

Home > Tutorials > JavaScript > How to Use the alert method in JavaScript

JavaScript - How to Use the alert method in JavaScript

The Window alert() method displays an alert box containing text and an OK button.

In addition to alert(), there are two other types of popup boxes – confirm and prompt.

The alert box only allows the user to click the OK button. It is intended to be used to convey important messages to the user that do not require a response, simply acknowledgement.

The users will not be able to access the program's interface until they click the OK button, confirming that they have read the message.

Basic examples

Below is a basic example of creating an alert using JavaScript:

alert('Please read our terms and conditions');

This line of code will display an alert window containing the words "Please read our terms and conditions", along with a button that reads "OK". This syntax is also equivalent to the following code:

window.alert('Please read our terms and conditions');

This code performs the same task as the first example, but explicitly uses the window object to generate the alert.

Syntax

The syntax for the Window.alert() method is as follows:

alert(message)

message (optional): a String specifying the text that will appear in the popup box. This message will appear above an "OK" button. If data types other than Strings are provided as the message parameter, the alert() method will try to convert the data into a string by applying the toString() method.

Examples of Alerts With Different Data Types

The following examples demonstrate using different data types as arguments for the alert() method's message parameter:

Number

alert(1); // Expected text message: 1

undefined

alert(undefined); // Expected text message: undefined

null

alert(null); // Expected text message: null

Array

alert([22, 15, 67]); // Expected text message: 22, 15, 67

Note: The square brackets are removed from the array during the string conversion process.

Object

const user = { name: 'John', age: 36 }; alert(user); // Expected text message: [object Object]

Note: the default behavior of applying the toString() method to an object returns [object, object] as the converted string. To avoid this behavior, use JSON.stringify() or a for…in statement to convert the object to the desired string.

For example, the following is the text message returned for the above user object when using JSON.stringify():

alert(JSON.stringify(user)); // Expected text message: {"name":"John","age":36}

Note: the object's keys are now wrapped in double quotes.

Symbol

let sym = Symbol('foo') alert(sym) // Expected output: // Uncaught TypeError: Cannot convert a Symbol value to a string

When alerting with a Symbol we receive a TypeError. To get around this, apply the toString() method to the symbol as seen below:

alert(sym.toString()) // Expected text message: Symbol(foo)

Related Articles:

JavaScript – How to Use the toString method

JavaScript – How to Use JSON.stringify

JavaScript – How to Use the for…in Statement