June 10, 2020

How to Add Line Break in Javascript Alert

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to add line break in javascript alert. Showing an alert message is a common pattern to notify your website users about success, warning, or error during form submission.

You may have seen websites where as soon as a visitor land on the webpage, they show an alert message as a way to promote some service or offer some sort of discount coupon. If you do care about user retention, then trust me that is really annoying and you should never do that

To show an alert message in javascript, we can make use of the alert() method which takes a string as a parameter. The default alert message is not good in appearance and that is why you must know how to create custom alert box in javascript.

Showing a single sentence in the alert message is pretty straightforward, but to split a sentence into multiple lines, we have to make use of a template string. We just need to replace quotes with backticks and type a sentence with line breaks.

In the following example, we have a button element and upon click of that, we will show an alert message. Please have a look over the code example and the steps given below.

HTML & CSS

We have one button element and it has “Show Alert” as innerText.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <button>Show Alert</button>
    
    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

button {
    padding: 10px 20px;
}

Javascript

We have selected the button element using the document.querySelector() method and stored it in the btnShow variable.

We have a global variable str which holds a template string with line breaks.
We have attached a click event listener to the button element.
In the event handler function, we are calling the alert() method and passing str as a parameter.

let btnShow = document.querySelector('button');

let str = 
`This is
Hello World
in Javascript`;

btnShow.addEventListener('click', () => {   
    alert(str);
});

You May Also Like: