JavaScript Input & Output

Take input from users and show output in console or webpage UI.

prompt/confirmconsole/DOM outputForms

Table of Contents

Introduction

JavaScript handles input and output differently depending on where your code runs. In a browser, you interact with users through dialogs or the page itself. In environments like Node.js, you use the console or standard input.

1. Basic Output in JavaScript

Console Output (Most Common)

console.log("Hello, World!");
console.error("Error message");
console.warn("Warning message");

This prints output to the browser console (press F12 -> Console).

Output to Web Page

document.write("Hello, User!"); // not recommended for modern apps

document.getElementById("output").innerText = "Hello!";
<p id="output"></p>

Alert Box Output

alert("Welcome!");

2. Taking Input in JavaScript

Using prompt() (Simple Input)

let name = prompt("Enter your name:");
console.log("Hello " + name);

Using HTML Input Field (Best Practice)

<input type="text" id="username" placeholder="Enter name">
<button onclick="getInput()">Submit</button>
<p id="result"></p>
function getInput() {
    let name = document.getElementById("username").value;
    document.getElementById("result").innerText = "Hello " + name;
}

3. Input & Output in Node.js

Output

console.log("Hello from Node.js");

Input (Using readline)

const readline = require("readline");

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

rl.question("Enter your name: ", function(name) {
    console.log("Hello " + name);
    rl.close();
});

4. Quick Comparison

MethodInputOutputUsage
prompt()YesNoSimple browser input
console.log()NoYesDebugging
alert()NoYesPopup messages
HTML + DOMYesYesReal websites
Node.js readlineYesYesBackend / CLI

Best Practices

  • Validate user input before use.
  • Convert string inputs to number using Number().
  • Avoid excessive alert() in production UI.
  • Use console for debugging, DOM for user-facing output.

10 Input/Output Interview Q&A

1What does prompt return?easy
Answer: String input or null if user cancels.
2Difference between innerText and innerHTML?medium
Answer: innerText treats plain text; innerHTML parses HTML markup.
3How to convert prompt input to number?easy
Answer: Use Number(value) or parseInt/parseFloat.
4Why avoid alert for modern UX?easy
Answer: Blocks thread and interrupts user flow.
5How do forms provide input?easy
Answer: Through input element values read via DOM APIs.
6What is console.log mainly used for?easy
Answer: Debugging and development-time tracing.
7What if prompt returns null?medium
Answer: Handle cancellation with checks before processing.
8How to prevent HTML injection in output?hard
Answer: Prefer textContent/innerText over innerHTML for untrusted input.
9Difference between confirm true/false?easy
Answer: OK returns true, Cancel returns false.
10Why validate form input client-side?easy
Answer: Better UX and early error feedback (server validation still required).

10 Input/Output MCQs

1

prompt() returns:

ANumber only
BString or null
CBoolean
DObject
Explanation: prompt returns user text or null.
2

Best method for debug output?

Aalert
Bconsole.log
Cconfirm
Dprint
Explanation: console.log is standard debugging output.
3

confirm() returns:

AString
BBoolean
CArray
DUndefined
Explanation: confirm returns true/false.
4

To show safe text in DOM use:

AinnerHTML always
BinnerText/textContent
Cdocument.write
Dalert
Explanation: text APIs reduce injection risk.
5

Input element value is read using:

A.text
B.value
C.data
D.node
Explanation: form inputs use value property.
6

Number(prompt()) is used for:

ADOM output
BType conversion
CValidation only
DFormatting
Explanation: converts input string to number.
7

Which output blocks user interaction?

Aconsole.log
Balert
CinnerText
DtextContent
Explanation: alert is modal and blocking.
8

Cancel in prompt gives:

A""
Bnull
Cundefined
Dfalse
Explanation: prompt cancel returns null.
9

Best user-visible output method in web apps:

Aconsole.log
BDOM update
Cprompt
Ddebugger
Explanation: update DOM for real users.
10

Which property is usually used to read text from an input field?

A.innerText
B.value
C.innerHTML
D.textContent
Explanation: Form controls use the value property for user input.