JavaScript Alert Box

Trang chủ » Html Js Alert Button » JavaScript Alert Box

Có thể bạn quan tâm

JavaScript Alert Box

Also see the HTML <dialog> tag.

The JavaScript alert box is useful for alerting your users to something important. When a JavaScript alert box is triggered, a small box will pop up and display the text that you specify in your JavaScript code.

You create a JavaScript alert box by calling the built-in JavaScript alert() function. All you need to do is pass your message to this function.

JavaScript Alert: onClick

You can place the JavaScript alert() function directly into a button element, then use the onClick event to trigger it. Like this:

<input type="button" value="Click me" onclick="alert('Thanks... I feel much better now!');" style="font-size:2em;background:lime">

View Output

JavaScript Alert: Before Page Loads

The above example uses the JavaScript onClick event to trigger the alert box. This example, on the other hand, loads automatically as the page is loading. By placing the code by itself (i.e. not within a link/button), this will automatically trigger the alert box as soon as the page is loading.

The alert will popup as the browser renders the code. Therefore, if you place the code within the <head> tags, your alert box will popup before the HTML elements are displayed. On the other hand, if you call your alert() function within the <body> tags, users will be able to see any HTML elements that have been rendered prior to the alert box code.

View Example

<html> <head> <body> <div style="text-align:center;padding:10px;"> <h1>Amazing Web Page</h1> <script> alert('But wait, there\'s more...'); </script> <p><a href="JavaScript:self.close();">Close This Silly Page!</a></p> </div> </body> </html>

JavaScript Alert: After Page Loads

If you prefer to have the full page visible while the user reads the alert box message, use the onLoad event.

To do this, place a function in the document's <head>, then trigger it using the onLoad attribute in the document's <body> tag.

View Example

<html> <head> <script> function alertUser(msg) { alert(msg); } </script> </head> <body onload="alertUser('Welcome to this AMAZING web page!')"> <div style="text-align:center;padding:10px;"> <h1>Amazing Web Page.</h1> <p><a href="JavaScript:self.close();">Close</a></p> </div> </body> </html>

JavaScript Alert: Within Another Function

The most common use for the JavaScript alert is to call it from within a function that does something else. The alert simply draws the user's attention to something that the function has done (or detected).

<script> function jumpto(x){ if (document.form1.jumpmenu.value != "null") { if (document.form1.jumpmenu.value != "https://www.quackit.com/") { alert('Good choice!'); } document.location.href = x } } </script> <form name="form1"> <select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)"> <option>Jump to...</option> <option value="https://www.quackit.com/">Home</option> <option value="https://www.quackit.com/html/tutorial/">HTML Tutorial</option> <option value="https://www.quackit.com/database/tutorial/">Database Tutorial</option> <option value="https://www.quackit.com/mysql/tutorial/">MySQL Tutorial</option> </select> </form>

In the above example, if you choose anything but Home, you'll see a JavaScript alert.

HTML <dialog> Element

Also see the HTML <dialog> element, which allows you to do things like, create a dialog box, inspector, window, etc.

Từ khóa » Html Js Alert Button