Basic input concepts (prompt overview) in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this prompt input code?

Consider this JavaScript code that asks the user for their name and then greets them. What will be shown in the console if the user enters Alex?

Javascript

const name = prompt('What is your name?');
console.log(`Hello, ${name}!`);

A Hello, name!

B Hello, Alex!

C What is your name?

D undefined

💡 Hint

The prompt function returns the text the user types.

The prompt function shows a box asking for input. The input is stored in the variable 'name'. Then console.log prints 'Hello, ' plus the input plus '!'. So if the user types 'Alex', the output is 'Hello, Alex!'.

❓ Predict Output

intermediate

What happens if the user presses Cancel in prompt?

Look at this code snippet. What will be the value of answer if the user presses Cancel in the prompt box?

Javascript

const answer = prompt('Type something or press Cancel');
console.log(answer);

A Throws an error

B "" (empty string)

C undefined

D null

💡 Hint

Cancel returns a special value different from empty string.

When the user presses Cancel, prompt returns null, which is logged to the console.

🧠 Conceptual

advanced

Why should you convert prompt input to a number?

The prompt function always returns a string. Why is it important to convert this string to a number when expecting numeric input?

A Because strings cannot be stored in variables

B Because prompt returns undefined for numbers

C Because arithmetic operations on strings can produce unexpected results

D Because numbers are always returned as null

💡 Hint

Think about what happens if you add two strings that look like numbers.

If you don't convert the string to a number, adding two inputs will concatenate them as strings instead of adding numerically.

❓ Predict Output

advanced

What is the output of this code with numeric input?

What will be the output if the user enters 5 in the prompt?

Javascript

const input = prompt('Enter a number');
const result = input * 2;
console.log(result);

A 10

B "55"

C undefined

D NaN

💡 Hint

Multiplying a string that looks like a number by a number converts it automatically.

JavaScript converts the string '5' to number 5 when using the * operator, so 5 * 2 = 10.

❓ Predict Output

expert

What error does this code produce?

What error will this code cause when run in a browser?

Javascript

const name = prompt('Enter your name');
alert('Hello, ' + name.toUpperCase());

A TypeError: Cannot read property 'toUpperCase' of null

B SyntaxError: Unexpected token

C ReferenceError: name is not defined

D No error, alerts 'Hello, NAME'

💡 Hint

What happens if the user presses Cancel and name is null?

If the user presses Cancel, prompt returns null. Calling toUpperCase() on null causes a TypeError.

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