JavaScript User Input
User input allows your JavaScript program to interact with the visitor. JavaScript provides several easy ways to collect input — popup dialogs like prompt() and confirm(), and HTML input fields read through the DOM.
What is User Input in JavaScript?
User input means data entered by the user that the program can read and use. In JavaScript, we commonly take input through popup boxes (prompt, confirm) or by reading values from HTML form fields using the DOM.
Ways To Take Input in JavaScript
prompt()
Shows a popup dialog and returns the text typed by the user as a string.
confirm()
Shows OK / Cancel dialog and returns true or false.
alert()
Shows an information popup. Used to display output, not to read input.
Input Field
HTML <input> element read with document.getElementById('id').value.
Form Submit
Capture all form inputs together when the user submits a form.
Event Listeners
Listen to keydown / change / click events to read live input.
Basic Features
- Always String: prompt() always returns a string, even if the user types a number.
- Cancel returns null: If the user presses Cancel, prompt() returns null.
- Default value: prompt('Enter name', 'Guest') can pre-fill a default value.
- DOM Reading: Use .value to read from input boxes, .checked for checkboxes.
User Input in JavaScript
In JavaScript, user input allows programs to interact with users dynamically. Input can be taken using prompt(), confirm(), alert(), or HTML form elements. These methods help create interactive web applications.
The prompt() Function
The prompt() function asks the user to enter data and stores the entered value inside a variable.
let value = prompt("Enter your name:");
alert("Welcome " + value);
let ok = confirm("Are you sure?");
if(ok){
alert("Confirmed");
}
// Reading from HTML input
let name =
document.getElementById(
"username"
).value;
Your First User Input Program
This example greets the user after taking input using prompt().
<!DOCTYPE html>
<html>
<body>
<script>
let name =
prompt("Enter your name:");
document.write(
"Hello " + name +
", welcome to PBA INSTITUTE!"
);
</script>
</body>
</html>
Example 1 : Add Two Numbers
This program adds two numbers entered by the user.
<script>
let a = Number(
prompt("Enter first number:")
);
let b = Number(
prompt("Enter second number:")
);
let sum = a + b;
document.write(
"Sum = " + sum
);
</script>
Example 2 : Area of Circle
This program calculates the area of a circle using user input.
<script>
let r = Number(
prompt("Enter radius:")
);
let area =
3.14 * r * r;
document.write(
"Area = " + area
);
</script>
Example 3 : Reading HTML Input
This example reads user data from an HTML input field.
<input type="text"
id="uname">
<button onclick="greet()">
Submit
</button>
<p id="out"></p>
<script>
function greet(){
let n =
document.getElementById(
"uname"
).value;
document.getElementById(
"out"
).innerHTML =
"Hi " + n;
}
</script>
Example 4 : Confirm Box
The confirm() function displays OK and Cancel buttons.
<script>
let ok =
confirm(
"Do you want to continue?"
);
if(ok){
document.write(
"You clicked OK"
);
}else{
document.write(
"You clicked Cancel"
);
}
</script>
Important Notes
- prompt() always returns a string value.
- Use Number() or parseInt() for calculations.
- confirm() returns true or false.
- HTML input fields provide modern user interaction.
Conclusion
User input makes JavaScript programs interactive and dynamic. Using prompt(), confirm(), alert(), and HTML forms helps developers create responsive and user-friendly applications.
Real-Life Use Cases
Login Forms
Take username and password from input fields and validate them.
Calculators
Read two numbers from the user and perform arithmetic operations.
Surveys
Collect feedback through text boxes, radio buttons, and checkboxes.
Confirmation
Use confirm() before deleting data or submitting a payment.
Practice Questions
- Take a user's name and age and display: "Hi NAME, you are AGE years old."
- Read two numbers using prompt() and print their product.
- Ask the user a yes/no question with confirm() and react accordingly.
- Build an input field with a button that shows the typed text in a paragraph.
- Read a temperature in Celsius from the user and convert it to Fahrenheit.
Frequently Asked Questions
| Question | Answer |
|---|---|
| Q. How do I take input from a user in JavaScript? | Use prompt() for a popup, or read document.getElementById('id').value from a form field. |
| Q. Why does prompt() return a string for numbers? | Because prompt() always returns text. Convert it using Number() or parseInt(). |
| Q. What is the difference between alert and confirm? | alert() only shows a message. confirm() asks OK/Cancel and returns true or false. |
| Q. Can prompt() return null? | Yes, if the user clicks Cancel, prompt() returns null. |
| Q. Which is better — prompt or input field? | For modern websites, HTML input fields are preferred. prompt() is mostly used for quick learning examples. |
Conclusion
User input is the bridge between your program and the visitor. Mastering prompt(), confirm(), and DOM-based input reading allows you to build interactive JavaScript applications. Always remember to validate and convert input before using it.
JavaScript All Chapters
Continue Learning
Previous
Go to Introduction Chapter