Horje
How to take user input in JavaScript?

Interacting with the user by taking inputs is essential to make an application engaging and user-friendly. Whether building a simple form validation script or a complex web application that relies on user interactions, mastering the art of taking user input in JavaScript is essential.

Approach: The “prompt” method

  • 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.
  • The prompt method is very helpful in situations where you require rapid and straightforward user input.
  • 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")

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:

input1

take user input with message “Please enter your name”

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:

input2

take user input with message “Please enter your name” and default value “GeeksforGeeks User”

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:

promptreviewnull

Example: we first check if the user provided input (didn’t press Cancel or close the dialog), and if so, we display a greeting. If the user canceled, we display a message indicating that they canceled the input.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Document</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:

input4

take user input and show the output


 


Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
Protein Energy Malnutrition - Definition and Classification of PEM Protein Energy Malnutrition - Definition and Classification of PEM
Checksum algorithms in JavaScript Checksum algorithms in JavaScript
How to customize the labels for previous and next buttons in React Bootstrap pagination? How to customize the labels for previous and next buttons in React Bootstrap pagination?
How to override React Bootstrap active Tab default border styling? How to override React Bootstrap active Tab default border styling?
Transpose Square Matrix Calculator by using React-native Transpose Square Matrix Calculator by using React-native

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 12



 

Horje