Perplexed Owl Random Ponderings

Benjamin ‘Benilda’ Key:

JavaScript alert example

Introduction

This web page demonstrates the use of the Window.alert() method without any extraneous fluff to confuse the issue.

Displaying an alert dialog

The following link displays the alert system dialog.

Click here to show the alert system dialog.

When the above link is pressed the following dialog is displayed.

Java Script Alert Dialog

Screen shot of the Java Script Alert Dialog. In the title region of the dialog is the text “sullivanandkey.com says”. In the middle of the dialog is the text “Hello world! It truly is a wonderful day to be alive!”. In the bottom right of the dialog is the OK button.

The dialog is displayed by the following line of code.


window.alert('Hello world! It truly is a wonderful day to be alive!');

The “Click here to show the alert system dialog” link is assigned the id “showAlertLink”. The following code is used to assign a handler for the click event to this link.


let showAlertLink = document.getElementById('showAlertLink');
showAlertLink.addEventListener('click', function(e) {
  window.alert('Hello world! It truly is a wonderful day to be alive!');
  e.preventDefault();
});

Finding out why an alert dialog is being displayed

If you ever encounter a situation where alert dialogs are being displayed for an unknown reason, you can add the following code snippet to your web page.


var originalWindowAlert = window.alert;
window.alert = function() {
  console.trace();
  return originalWindowAlert.apply(window, arguments);
}

This will cause something like the following to be displayed in the JavaScript console when an alert is displayed.


JavaScriptAlertExample.html:91 console.trace
window.alert @ JavaScriptAlertExample.html:91
(anonymous) @ JavaScriptAlertExample.html:97

In the above example, the second line provides the location of the “console.trace();” line and the third line shows were the alert function was called.