| by Arround The Web | No comments

What is the JavaScript Window prompt() Method

In JavaScript, the “prompt” box asks the user to enter an input value in a web page. This dialogue box contains two buttons “OK” to return the input value and “Cancel” to return a “null” value in case of no input value. It is mostly used in HTML forms to take input from the user. JavaScript offers the “prompt()” method to generate a prompt box. It asks the user to input a value in its textbox and the value is evaluated accordingly.

This write-up illustrates the working and practical implementation of the JavaScript window “prompt()” method.

What is the JavaScript Window “prompt()” Method?

The Window “prompt()” method pops up a prompt box that prompts the user input and as a result displays an optional message. It can be implemented without specifying the “window” object as a prefix. It proceeds by clicking the “OK” or the “Cancel” button of the prompt box.

Syntax

prompt(message, default)

According to the above syntax, the “prompt()” method accepts two parameters that are listed below:

  • message: It represents the label i.e., text statement that the user wants to print on the prompt box. It is optional.
  • default: It specifies the default string that displays in the text area of the prompt box.

Let’s use the above syntax practically.

Example: Applying the Window “prompt()” Method to Display the Specified Message Using Prompt Box

This example applies the window “prompt()” method to display the specified message with the help of the prompt box.

HTML Code

Let’s have a look at the following HTML code:

<h2>JavaScript Window prompt() Method</h2>
<button onclick="showDialog()">Click here</button>
<p id="sample"></p>

In the above code snippet:

  • The “<h2>” tag defines the subheading of level 2.
  • The “<button>” tag creates a button with an attached “onclick” event to allow the execution of the “showDialog()” function.
  • Lastly, the “<p>” tag adds an empty paragraph with an assigned id “sample” to display the specified user input value.

JavaScript Code

Consider the given code block:

<script>
function showDialog() {
var txt = prompt("Please enter some text","Linuxhint");
document.getElementById("sample").innerHTML = "Welcome to " + txt;
}
</script>

According to the above code lines:

  • The user-defined function “showDialog()” first declares a variable “text” with a “var” keyword that creates a “prompt” box with a stated label and message, respectively.
  • After that, apply the “getElementById()” method to access the empty paragraph using its id “sample”.
  • Also, display the given text and the specified default string i.e., the latter parameter of the “prompt()” method using the “innerHTML” property.

Output

The output pops up a prompt box having the specified user input and then displays it on DOM by clicking on the “OK” button.

Moreover, the user can also enter any desired value at runtime in the given prompt box and display it in the DOM like this:

Here, the user-entered value is displayed on the current web page after clicking on the “OK” button.

Conclusion

JavaScript offers the “prompt()” method to generate a prompt box that asks the user to input a value in its textbox and the value is evaluated accordingly. However, it returns a “null” value in case of no input value. This write-up explains the working and practical implementation of the JavaScript window “prompt()” method.

Share Button

Source: linuxhint.com

Leave a Reply