{"id":5210,"date":"2021-09-27T02:00:00","date_gmt":"2021-09-27T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/javascript-alert\/"},"modified":"2024-02-08T00:31:17","modified_gmt":"2024-02-07T23:31:17","slug":"javascript-alert","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/javascript-alert\/","title":{"rendered":"JavaScript Alert [Examples And Usage]"},"content":{"rendered":"

The JavaScript alert()<\/code> function is a function available on the global window<\/code> object. It commands the browser to display a modal dialog with a message and an “OK” button.<\/strong><\/p>\n

Here’s a basic example of usage:<\/p>\n

alert(\"Hello world!\"<\/span>);\n\n\/\/ Which is quivalent to:<\/span>\nwindow<\/span>.alert(\"Hello world\"<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
\n
Note that, when executed, the alert<\/code> function will get the focus and prevent the user from interacting with the reset of the website until the modal gets dismisssed.<\/p>\n<\/blockquote>\n
Examples using alert<\/h2>\n
1. Alert message on click<\/h3>\n
A very common use case for the alert<\/code> fuction is to use it when filling a form and then trying to submit it by clicking a button.<\/p>\n
Let’s say we want to make sure the user is over 18 years old when filling the following form:<\/p>\n
<form<\/span> name<\/span>=\"myForm\"<\/span> action<\/span>=\"\"<\/span>><\/span>\n    <label<\/span> for<\/span>=\"age\"<\/span>><\/span>Age<\/label<\/span>><\/span>\n    <input<\/span> type<\/span>=\"number\"<\/span> name<\/span>=\"age\"<\/span> id<\/span>=\"age\"<\/span> \/><\/span>\n    <button<\/span> type<\/span>=\"submit\"<\/span>><\/span>Submit<\/button<\/span>><\/span>\n<\/form<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
All we have to do is attach an event listener to the button, checking for the value of the input field and then displaying the modal with the alert<\/code> function of JavaScript:<\/p>\n
var<\/span> checkAge = (e<\/span>) =><\/span> {\n    if<\/span>(document<\/span>.querySelector('#age'<\/span>).value < 18<\/span>){\n    \n        \/\/ Preventing the submit of the form<\/span>\n        e.preventDefault();\n        \n        \/\/ Displaying the modal window<\/span>\n        alert(\"You have to be older 18!\"<\/span>);\n    }\n};\n\n\/\/ Listening to the click event on the button<\/span>\ndocument<\/span>.querySelector('button'<\/span>).addEventListener('click'<\/span>, checkAge);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n