JavaScript becomes useful when a program can receive information, process it, and communicate the result. The information received by a program is called input, while the information presented by the program is called output.
For example, a student-result program may receive marks as input, calculate the result, and display whether the student has passed or failed. Similarly, a registration page receives information from a user and displays appropriate messages based on the entered data.
In this chapter, you will learn different ways to receive input and display output in JavaScript. The examples start with simple browser methods and gradually move toward HTML-based user interaction.
Input is information supplied to a JavaScript program. The source of input depends on the type of application. A small learning program may use a browser dialog box, while a real website normally collects information through HTML form controls.
Output is the information produced by a JavaScript program after it executes an instruction or processes some input. JavaScript can send output to the webpage, a dialog box, or the browser's developer console.
Most interactive JavaScript programs follow a simple sequence: receive information, process that information, and present the result.
Input → Processing → Output
For example, a program that calculates the sum of two numbers can receive two values, add them, and then display the calculated result.
let firstNumber = 12; let secondNumber = 8; let total = firstNumber + secondNumber; console.log(total);
The two numbers are the input values, the addition is the processing step, and the value 20 is the output.
JavaScript provides several ways to display information. The appropriate method depends on whether the output is intended for the user, the webpage, or the developer.
| Method | Typical Purpose |
|---|---|
| console.log() | Testing values and debugging programs. |
| alert() | Showing a simple browser notification. |
| document.write() | Writing directly into the document, mainly for simple demonstrations. |
| innerHTML | Replacing the HTML content of a selected element. |
| textContent | Displaying plain text inside an HTML element. |
The console.log() method sends information to the browser's Developer Console. It is especially useful when a programmer wants to inspect values while developing or debugging a program.
let studentName = "Amit"; let marks = 82; console.log(studentName); console.log(marks);
Amit 82
This output normally appears in the browser console rather than on the visible webpage.
let price = 250; let quantity = 3; console.log(price * quantity);
750
The console is particularly useful when you need to check whether a calculation or variable contains the expected value.
The alert() function displays a message in a browser dialog box. It is useful for simple notifications, warnings, and beginner-level demonstrations.
alert("Message");
alert("Your form has been submitted.");
The browser displays the message in a dialog box and waits for the user to acknowledge it.
Although alert() is easy to understand, modern websites generally use custom webpage elements, dialogs, or notification components when they need more control over the user interface.
The document.write() method writes content directly into the current HTML document. It is simple and useful for demonstrating basic JavaScript output.
document.write("JavaScript is running.");
JavaScript is running.
For learning purposes, document.write() can be helpful. However, it should not normally be used to update an already loaded webpage because calling it after the document has loaded can replace the existing document content.
The innerHTML property allows JavaScript to replace the HTML content inside a selected element. It is useful when a program needs to update part of a webpage dynamically.
<p id="result"></p>
document.getElementById("result").innerHTML =
"Result: 85 marks";
Result: 85 marks
Here, JavaScript finds the paragraph using its ID and changes the content inside that element.
document.getElementById("message").innerHTML =
"<strong>Congratulations!</strong>";
Because innerHTML interprets HTML markup, it should be used carefully when the content comes from an untrusted user.
The textContent property changes the text contained inside an HTML element. It treats the assigned value as text rather than interpreting it as HTML markup.
<p id="message"></p>
document.getElementById("message").textContent =
"Welcome to the JavaScript course.";
Welcome to the JavaScript course.
textContent is a useful choice when the program needs to display plain text, especially when the text may have come from a user.
| Feature | innerHTML | textContent |
|---|---|---|
| Displays plain text | Yes | Yes |
| Interprets HTML markup | Yes | No |
| Useful for HTML content | Yes | No |
| Suitable for plain user text | Use with care | Yes |
JavaScript can receive input through browser dialog methods and HTML form controls. Dialog methods are convenient for learning and simple demonstrations, while HTML controls are more appropriate for normal web applications.
| Method | Purpose | Returned Value |
|---|---|---|
| prompt() | Receives text from the user. | String or null |
| confirm() | Asks the user to confirm an action. | true or false |
| HTML input | Collects information through webpage controls. | Usually a string value |
The prompt() function displays a dialog box containing a message and an input field. The user can enter a value and submit it.
let value = prompt("Enter a value");
let studentName = prompt("Enter your name");
console.log(studentName);
If the user enters Neha, the variable studentName receives that text.
The value returned by prompt() is text. Therefore, when a number is required for calculation, the value should be converted into a numeric type.
Suppose the user enters two numbers using prompt(). The returned values are strings, so directly using them with the addition operator can produce string concatenation instead of numerical addition.
let a = prompt("Enter first number");
let b = prompt("Enter second number");
let result = a + b;
console.log(result);
If the user enters 10 and 20, the result may be:
1020
This happens because the values received from prompt() are strings.
let a = Number(prompt("Enter first number"));
let b = Number(prompt("Enter second number"));
let result = a + b;
console.log(result);
30
The confirm() function asks the user to make a simple decision. The dialog normally contains OK and Cancel buttons.
let answer = confirm("Do you want to continue?");
console.log(answer);
If the user selects OK, the returned value is true. If the user selects Cancel, the returned value is false.
let choice = confirm("Do you want to save the changes?");
if(choice)
{
console.log("Changes saved.");
}
else
{
console.log("Operation cancelled.");
}
For normal websites, user information is usually collected through HTML form controls. JavaScript can read the current value of an input element using its value property.
<input type="text" id="studentName">
<button onclick="showName()">
Show Name
</button>
<p id="result"></p>
function showName()
{
let name =
document.getElementById("studentName").value;
document.getElementById("result").textContent =
"Student Name: " + name;
}
This approach is closer to how input is handled in practical web applications because the user interacts directly with controls on the webpage.
Before processing user information, a program should check whether a required field contains a value.
let name = prompt("Enter your name");
if(name === null || name.trim() === "")
{
alert("Please enter your name.");
}
else
{
alert("Welcome " + name);
}
The check handles both cancellation and an empty or whitespace-only input.
A basic billing program can receive the price and quantity from the user, calculate the total amount, and display the result.
let price = Number(prompt("Enter product price"));
let quantity = Number(prompt("Enter quantity"));
let total = price * quantity;
document.write("Total Amount = " + total);
Price: 150 Quantity: 4
Total Amount = 600
The following example receives marks and determines whether the student has passed.
let marks = Number(prompt("Enter your marks"));
if(marks >= 40)
{
alert("Result: Pass");
}
else
{
alert("Result: Fail");
}
The program first receives the marks, converts the input into a number, checks the condition, and finally displays the result.
A webpage can use information supplied by a visitor to display a personalized message.
<p id="welcome"></p>
let name = prompt("What is your name?");
if(name !== null && name.trim() !== "")
{
document.getElementById("welcome").textContent =
"Welcome, " + name.trim() + "!";
}
Different output techniques serve different purposes. Choosing the correct method makes a program easier to use and maintain.
| Requirement | Recommended Method |
|---|---|
| Debug a variable | console.log() |
| Show a simple notification | alert() |
| Update webpage HTML | innerHTML |
| Display plain text | textContent |
| Collect form information | HTML input elements |
| Learn basic document output | document.write() |
Beginners often encounter input and output errors because JavaScript treats values according to their data type and the selected output method.
Answer: Input is information supplied to a JavaScript program for processing. It can come from methods such as prompt() or from HTML form controls such as input, select, and textarea elements.
Answer: Output is the information produced or displayed by a JavaScript program. It can be shown using methods such as console.log(), alert(), innerHTML, textContent, or other webpage elements.
Answer: console.log() sends information to the browser's Developer Console. It is commonly used to inspect variables, check calculations, and debug JavaScript programs.
let total = 50 + 25; console.log(total);
Answer: prompt() returns the value entered by the user as a string. If the user cancels the dialog, it returns null.
let age = prompt("Enter your age");
If numerical processing is required, the value can be converted using Number().
Answer: Values received through prompt() are text. Number() converts numeric text into a number so that arithmetic operations can be performed correctly.
let a = Number(prompt("Enter first number"));
let b = Number(prompt("Enter second number"));
console.log(a + b);
Answer: alert() displays a dialog box to the user, while console.log() sends information to the browser's Developer Console.
| alert() | console.log() |
|---|---|
| Visible to the user. | Mainly visible to the developer. |
| Displays a browser dialog. | Displays information in the console. |
| Useful for simple notifications. | Useful for debugging. |
Answer: confirm() asks the user to make a yes/no-style decision using OK and Cancel buttons. It returns true when OK is selected and false when Cancel is selected.
Answer: innerHTML is a property used to read or replace the HTML markup contained inside an element.
document.getElementById("demo").innerHTML =
"<strong>Hello JavaScript</strong>";
Answer: textContent is a property used to read or set the text content of an HTML element. The assigned value is treated as text rather than HTML markup.
document.getElementById("demo").textContent =
"Hello JavaScript";
Answer: innerHTML interprets HTML markup, while textContent treats the assigned value as plain text.
element.innerHTML = "<b>Hello</b>";
This can produce bold text because the HTML tag is interpreted.
element.textContent = "<b>Hello</b>";
Here the tag is treated as text rather than being interpreted as HTML.
Answer: document.write() is mainly useful for simple demonstrations. When used after the document has loaded, it can replace the existing document content. Modern applications generally update specific elements through DOM APIs instead.
Answer: JavaScript can select the textbox and read its value property.
let name =
document.getElementById("name").value;
console.log(name);
Answer: Because prompt() returns strings, the + operator may concatenate the values instead of adding them numerically.
let a = prompt("Enter first number");
let b = prompt("Enter second number");
console.log(a + b);
If the inputs are 10 and 20, the result can be 1020. Using Number() converts them into numeric values.
Answer: console.log() is commonly used for debugging because it allows developers to inspect values and program execution without displaying messages directly on the webpage.
Answer: textContent is generally a good choice when the intended result is plain text. It does not interpret the assigned value as HTML markup.
JavaScript Input and Output are fundamental concepts for creating interactive programs. Input provides information to a program, while output communicates the result of processing that information.
In this chapter, you learned how to use prompt() and confirm() for simple browser-based input, how to collect values from HTML elements, and how to convert text input into numbers. You also learned about console.log(), alert(), document.write(), innerHTML, and textContent for displaying information.
Understanding these techniques provides a strong foundation for more advanced topics such as DOM manipulation, events, form validation, conditions, and interactive web applications.