An alert box is mainly used to share or take input information with users. JavaScript Alert box will pop up on the website when some action or interaction happened. Users can cancel it or agree with the information in the alert box. Just use a JavaScript alert method inside <script> tag.
Before start, must have knowledge about:
You have to basic knowledge about HTML, JavaScript, basic tags and elements. Follow below links if you don’t know about it.
- What is HTML
- What is JavaScript Language
- HTML Hello World Code example
- HTML Basic | Definition | Tags and attributes | Elements
Syntax
A JavaScript alert syntax.
window.alert("sometext");Simple | JavaScript Alert Example
Let’s see the basic example of an alert box. Use JavaScript alert function in html code same as below example.
An Alert box will auto popup before or after page load. A JavaScript alert message is write in methods as a string.
<!DOCTYPE html>
<html>
<body>
<h2>Simple JavaScript Alert</h2>
<script>
alert("I am an alert box!");
</script>
</body>
</html>
Output: in safari browser.
JavaScript alert button | onclick alert
You can JavaScript the alert button onclick attribute to get the alert box. See example created function – “myFunction()” and trigger when the user clicks on the html button.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Try it - click</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>Output: Click the below button to see the result:
JavaScript Alert Confirm | Yes-No
A confirm box is often used if you want the user to verify or accept something. Or JavaScript alert box with yes-no option.
If the user clicks “OK” ( “Yes” ) returns true otherwise clicks “Cancel”( “No” ) returns false. Let’s see an example of a confirm box in javascript.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Confirm Box</h2>
<button onclick="myFunction()">Try it - click</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt;
if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Output: click on below button and see the result.
JavaScript alert input | Prompt Dialog Box
To take an input from a user use a prompt dialog box. It is very useful to get user input.
This alert box has two buttons: OK and Cancel. On clicks, the OK button will return the entered value from the text box. If the user clicks the Cancel button will return null.
The the complete code for JavaScript alert form to take input from user.
<html>
<head>
<script>
function getValue() {
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body>
</html>
Output: click on button and see live example
How to a new line in javascript alert box?
\n will put a new line in – \n being a control code for new line.
alert("Line 1\nLine 2");Complete code
<html>
<head>
<script>
function getAlert() {
alert("Line 1\nLine 2");
}
</script>
</head>
<body>
<form>
<input type = "button" value = "Click Me" onclick = "getAlert();" />
</form>
</body>
</html>Output: Click on below button
Question: What are Javascript alert types?
Answer: JavaScript has three kinds of popup boxes: Alert box, Confirm box, and Prompt box. So js alert box is one type of popup box.
Question: Is it possible to change the Javascript alert box title?
Answer: No, you can’t. It’s a security/anti-phishing feature. At least not as alert()
This is determined by the web browser, for safety and security. For example, you can’t make it say “ You won the lottery ” with a message of “Would you like to grab it now?”
If really needed, you could use a jQuery plugin to have a custom alert.
Same for customizing alert box css is not allowed in javascript. You have to use a 3rd party library. Use bootstrap library modal component.
If you want alert auto-close after some time then it’s also not possible with the default alert box. There is no web API function to close the open alert
How to display script errors in a popup alert?
JavaScript alert error popup example code.
window.onerror = function(msg, url, linenumber) {
alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber);
return true;
}Do comment if you have any doubt and suggestion on this tutorial.
Note: The All Examples Javascript alert HTML are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version