HTML Coding for an Alert Box

by Sue Smith
HTML elements can call JavaScript functions on user interaction.

HTML elements can call JavaScript functions on user interaction.

Using HTML and JavaScript code, developers can create alert boxes to pop up when users interact with Web page elements. The HTML elements in a page can include event listener attributes detecting user interaction. When this user interaction occurs, the HTML code can specify a JavaScript function to execute. This JavaScript function can include the code to display an alert box to the user, which can display a message and a button.

Alert Syntax

The alert function in JavaScript prompts the browser to display a pop-up box which is separate to the page being viewed. When the user sees the alert box, they can click the button within it to dismiss it. returning to the page. The following sample JavaScript code demonstrates creating an alert box within a Web page: alert("This is an alert"); Whenever this code executes, the alert box will appear.

Message

The alert box created through HTML and JavaScript can display a message. Developers can include the message as a parameter to the alert function, listing it as a literal string value. Alternatively, the message can include variables as in the following example code: var theMessage = "Hello there"; alert(theMessage); The message can optionally include multiple variable references in conjunction with string literals as follows: var msgOne = "Hello!"; var msgTwo = "This is an alert..."; alert(msgOne + " " + msgTwo);

JavaScript Function

In most cases developers include their alert calls within JavaScript functions. Web pages can include JavaScript code sections in the head and body areas or can alternatively list the code in separate script files linked to from the page head section. The following sample code demonstrates including a JavaScript function with an alert command inside it: function showMessage(messageText) { alert(messageText); } This code receives the message to display as a parameter. This means that the code section calling the function must provide the message text and pass it as a parameter when it calls the function.

Calls

Developers often include event attributes within HTML elements, calling JavaScript functions on user interaction. For example, the following HTML markup code creates a button input element with an event listener attribute: <input type="button" onclick="showMessage('pressed')" value="Press Me" /> This code instructs the browser to listen for the user clicking the button, then call the JavaScript function specified, passing it the text parameter. When the page loads and the user clicks the button, an alert box will appear with the message "pressed" displayed in it. The code alternates between single and double quotes to distinguish between the function call and the parameter value.

About the Author

Sue Smith started writing in 2000. She has produced tutorials for companies including Apex Computer Training Software and articles on computing topics for various websites. Smith has a Master of Arts in English language and literature, as well as a Master of Science in information technology, both from the University of Glasgow.

Photo Credits

  • photo_camera Comstock/Comstock/Getty Images