Basic input concepts (prompt overview) in Javascript

Introduction

We use input to let the user tell the program what they want. It makes programs interactive and personal.

When you want to ask the user their name to greet them.

When you need the user to enter a number for a calculation.

When you want to get feedback or choices from the user.

When you want to customize what the program does based on user answers.

Syntax

Javascript

let variableName = prompt('Your question here');

The prompt function shows a box asking the user to type something.

The text inside the quotes is the question or message shown to the user.

Examples

This asks the user for their name and saves it in the variable name.

Javascript

let name = prompt('What is your name?');

This asks the user for their age and saves it as a string in age.

Javascript

let age = prompt('How old are you?');

This asks the user for their favorite color and stores it in color.

Javascript

let color = prompt('What is your favorite color?');

Sample Program

This program asks the user for their name and then shows a greeting message using an alert box.

Javascript

let userName = prompt('Please enter your name:');
alert('Hello, ' + userName + '! Welcome!');

Important Notes

The prompt function always returns a string, even if the user types numbers.

If the user clicks cancel, prompt returns null.

Use alert to show messages to the user after input.

Summary

Use prompt to ask the user for input in a simple box.

The input is saved as a string in a variable for your program to use.

Input makes your program interactive and personal.

Practice

1. What does the prompt() function do in JavaScript?

easy

A. It displays a message in the console.

B. It pauses the program without any input.

C. It creates a new HTML element.

D. It asks the user to enter some input as text.

Solution

1. Step 1: Understand the purpose of prompt()

   The prompt() function shows a dialog box that asks the user to type something.

2. Step 2: Identify the type of input it collects

   The input collected is always text (a string), even if the user types numbers.

3. Final Answer:

   It asks the user to enter some input as text. -> Option D

4. Quick Check:

   prompt() = asks user input [OK]

Hint: Remember prompt() always asks user for text input [OK]

Common Mistakes:

• Thinking prompt() shows output instead of input
• Assuming prompt() returns numbers automatically
• Confusing prompt() with console.log()

2. Which of the following is the correct syntax to ask the user for their name using prompt()?

easy

A. let name = prompt('Enter your name');

B. prompt = 'Enter your name';

C. let name = input('Enter your name');

D. console.prompt('Enter your name');

Solution

1. Step 1: Check the correct function name and usage

   The function to get input is prompt(), not input() or console.prompt().

2. Step 2: Assign the result to a variable

   We store the user's input in a variable using let name = prompt('Enter your name');.

3. Final Answer:

   let name = prompt('Enter your name'); -> Option A

4. Quick Check:

   Correct prompt syntax = let name = prompt('Enter your name'); [OK]

Hint: Use let variable = prompt('message') to get input [OK]

Common Mistakes:

• Using input() instead of prompt()
• Trying to assign prompt as a string
• Using console.prompt() which doesn't exist

3. What will be the output of this code if the user enters 25 in the prompt?

let age = prompt('Enter your age');
console.log(typeof age);

medium

A. "string"

B. "number"

C. "undefined"

D. "object"

Solution

1. Step 1: Understand the type returned by prompt()

   The prompt() function always returns a string, even if the user types a number.

2. Step 2: Check the output of typeof age

   Since age holds a string, typeof age will be "string".

3. Final Answer:

   "string" -> Option A

4. Quick Check:

   prompt() returns string type [OK]

Hint: prompt() always returns string type, not number [OK]

Common Mistakes:

• Assuming prompt returns a number automatically
• Confusing typeof output with input value
• Expecting undefined or object type

4. Identify the error in this code snippet:

let number = prompt('Enter a number');
let result = number + 10;
console.log(result);

medium

A. The prompt() function is missing parentheses.

B. The input from prompt() is a string, so adding 10 concatenates instead of sums.

C. The variable 'number' is not declared.

D. console.log() cannot print variables.

Solution

1. Step 1: Check the type of input from prompt()

   The prompt() returns a string, so number is a string.

2. Step 2: Understand the effect of adding a number to a string

   Adding 10 to a string causes string concatenation, not numeric addition.

3. Final Answer:

   The input from prompt() is a string, so adding 10 concatenates instead of sums. -> Option B

4. Quick Check:

   String + number = concatenation [OK]

Hint: Convert prompt input to number before adding [OK]

Common Mistakes:

• Thinking prompt input is a number by default
• Ignoring type conversion before arithmetic
• Believing console.log can't print variables

5. How can you correctly get a number from the user using prompt() and add 10 to it? Choose the correct code.

hard

A. let num = prompt('Enter number') + 10;

B. let num = parseInt(prompt); num + 10;

C. let num = Number(prompt('Enter number')) + 10;

D. let num = prompt('Enter number'); num = num + 10;

Solution

1. Step 1: Convert prompt input to a number

   Use Number() or parseInt() to convert the string input to a number.

2. Step 2: Add 10 to the converted number

   After conversion, adding 10 performs numeric addition correctly.

3. Final Answer:

   let num = Number(prompt('Enter number')) + 10; -> Option C

4. Quick Check:

   Convert input to number before adding [OK]

Hint: Wrap prompt() with Number() to convert input [OK]

Common Mistakes:

• Adding number directly to prompt() string
• Forgetting to call prompt() as a function
• Using parseInt without parentheses