Open In App

How to take user input in JavaScript?

Last Updated : 13 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Interacting with users is the best way to create engaging and dynamic web applications. Taking user input allows your applications to be interactive and responsive. Here we will see the approach to take user input in JavaScript, specifically using the prompt method, which is perfect for beginners.

Approach: The "prompt" method

  1. The prompt method is part of the JavaScript window object. It displays a dialog box with a message to the user, an input field, and an OK and Cancel button. Users can enter text into the input field, and when they press OK, the input is returned as a string. If they press Cancel or close the dialog, null is returned.
  2. The prompt method is very helpful in situations where you require rapid and straightforward user input.
  3. The prompt is a blocking function, which means it halts JavaScript execution until the user interacts with the dialogue. As this can have an impact on the user experience in web applications, it's frequently utilized for short input scenarios or fast interactions where blocking behavior is acceptable.

Syntax:

prompt("Message to the user", "Default Value")
  • Message to the user: The text you want to display in the dialog box.
  • Default Value (optional): The initial value that appears in the input field.

Basic Example

To prompt the user to enter their name:

Example: Dialog with the message "Please enter your name:".

JavaScript 
// JavaScript code to take input from the user,
// using the prompt function, with a display message.

const userInput = prompt("Please enter your name:");

Output:



Providing a Default Value

Example: Provide a default value in the prompt so that the input field will already contain the default value. Users can choose to modify the default value or enter their input.

JavaScript 
// JavaScript code to take input from the user,
// using the prompt function, with a display message
// and default message.

const userInput = prompt("Please enter your name:",
"GeeksForGeeks User");

Output:


Prmpt Without Arguments

Example: If you don't provide any arguments to the prompt function (i.e., you call it without any message or default value), it will still open a dialog box, but the user won't see any message or default text in the input field.

JavaScript 
// JavaScript code to take input from the user,
// using the prompt function, with no arguments.

const userInput = prompt();

Output:

Handling User Input

Example: It’s important to handle the user’s response appropriately. For example, you might want to display a greeting if the user provided input or a different message if they canceled:

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>How to Take User Input in JavaScript</title>
</head>

<body>
	<h1>
		How to take user input in JavaScript
	</h1>

	<script>
		const userInput = prompt("Please enter your name:",
			"GeeksForGeeks User");

		// Handling user input
		if (userInput !== null) {
			alert("Hello, " + userInput + "!");
		} else {
			alert("You canceled the input.");
		}

	</script>
</body>

</html>

Output:


Next Article
How to take user input in JavaScript?
author
shreyansh_agrawal
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox