search

Home  >  Article  >  Web Front-end  >  Interpret popup messages using events?

Interpret popup messages using events?

PHPz
PHPzforward
2023-08-24 22:37:021221browse

Interpret popup messages using events?

We can use popup boxes to display popup messages to application users. We will learn about different types of JavaScript popups in this tutorial.

The following JavaScript provides three different types of pop-up boxes.

  • Alert box

  • Confirmation box

  • Prompt box

Below we will learn about all the pop-up boxes one by one.

Alert box

We can use the window.alert() method to display the alert box. It just displays the message in a popup box.

When we need to provide some message to the user, we can use the alert box. For example, when a user logs into the application, it displays a message like "You logged in successfully."

grammar

Users can display alert boxes in JavaScript according to the following syntax. 

alert(message)

parameter

  • Message - This is a message that appears in the alert box.

Example

In this example, when the user clicks the button, we will call the showAlert() function. The showAlert() function uses the alert() method to display an alert box.

In the output, the user can observe that when we press the button, it displays the alert box with the message passed as parameter. When we press the "OK" button in the alert box, it disappears. 

<html>
<body>
   <h2> Showing the alert message using the <i> alert box. </i> </h2>
   <button onclick = "showAlert()"> Show Alert Message </button>
</body>
   <script>
      // function to show alert
      function showAlert() {
         alert("This is the important message");
      }
   </script>
</html>

Confirmation box

When we need user confirmation, we can use the confirmation box. For example, we need to get the user's confirmation before deleting some important data.

We can use the window.confirm() method to display the confirmation box. The confirmation box contains two buttons with the text "OK" and "Cancel". Returns false if the user pressed the cancel button; true otherwise.

grammar

Users can display the confirmation box in JavaScript according to the following syntax. 

confirm(message);

parameter

  • Message - This is a confirmation message that appears in the confirmation box.

return value

It returns true and false boolean values ​​based on whether the user pressed the "OK" or "Cancel" button.

Example

In this example, we use the confirm() method of the window object to display the confirmation box. Additionally, we display different messages to the user on the screen depending on whether they press the "OK" or "Cancel" button of the confirmation box. 

<html>
<body>
   <h2> Showing the confirm box using the <i> confirm() </i> method.</h2>
   <p id = "output"> </p>
   <button onclick = "showConfirm()"> Show Confirm box </button>
</body>
   <script>
      let message = "Kindly confirm once by pressing the ok or cancel button!";
      // function to show confirm box
      function showConfirm() {

         // showing the confirm box with the message parameter
         let returnValue = confirm(message);
         let output = document.getElementById("output");

         // According to the returned boolean value, show the output
         if (returnValue) {
            output.innerHTML += "You pressed the ok button.";
         } else {
            output.innerHTML += "You pressed the cancel button.";
         }
      }
   </script>
</html>

Prompt box

The prompt box is the third way to display pop-up messages in JavaScript. Prompt boxes are advanced versions of alert() and confirmation boxes. It displays a message in a box and accepts input from the user. Additionally, it contains OK and Cancel buttons for submitting input values.

grammar

Users can use the prompt box to obtain user input in JavaScript according to the following syntax. 

prompt(message, placeholder);

We called the static prompt() method in the above syntax.

parameter

  • message - This is a message that appears above the input box.

  • Placeholder - This is the text that displays in the input box.

return value

If the user presses the OK button, return the input value; otherwise, it is empty.

Example

In this example, we created the takeInput() function, which displays a tooltip to the user. We use a prompt box to get the name entered by the user.

When the user presses the OK button after entering the input value, we will display the user's input on the screen. 

<html>
<body>
   <h2> Showing the prompt box using the <i> prompt() </i> method. </h2>
   <p id = "output"> </p>
   <button onclick = "takeInput()"> Show Prompt box </button>
</body>
   <script>
      let message = "Enter your name";
      // function to take input using the prompt box
      function takeInput() {

         // showing the prompt with the message parameter
         let returnValue = prompt(message, "Shubham");
         let output = document.getElementById("output");
         if (returnValue) {
            output.innerHTML += "Your good name is " + returnValue;
         } else {
            output.innerHTML +=
            "You pressed the cancel button, or you entered the null value";
         }
      }
   </script>
</html>

We've looked at all three different popups with examples in this tutorial. If we only need to display a message, we can use an alert box, if we only need user confirmation, we should use a confirmation box. If we need to enter a value or confirm a value in a popup box, we should use a prompt box.

The above is the detailed content of Interpret popup messages using events?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript 对象 事件 alert prompt
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to create an HTML list from a JavaScript array?Next article：How to create an HTML list from a JavaScript array?

Related articles

See more