JavaScript Output
Learn different ways to display JavaScript results
📺 JavaScript Output Methods
JavaScript can display data in different ways. You can show results in HTML elements, popup boxes, browser console, or even print to paper.
// Different ways to show output
console.log("Hello Console!");
alert("Hello Alert!");
JavaScript Output Methods
innerHTML
Change HTML element content
document.getElementById("demo")
.innerHTML = "Hello!";alert()
Show popup message box
alert("Hello World!");console.log()
Display in browser console
console.log("Debug info");document.write()
Write directly to HTML document
document.write("Hello!");🔹 Using innerHTML
The most common way to display JavaScript output is by changing HTML content:
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">Original text here</p>
<script>
document.getElementById("demo").innerHTML = "Text changed by JavaScript!";
</script>
</body>
</html>Result:
My Web Page
Text changed by JavaScript!
🔹 Using alert()
Display data in a popup alert box:
// Simple alert
alert("Welcome to my website!");
// Alert with variables
let name = "John";
alert("Hello, " + name + "!");
// Alert with calculations
let result = 5 + 3;
alert("5 + 3 = " + result);
Result:
Shows popup boxes with the messages
🔹 Using console.log()
Display data in the browser's developer console (great for debugging):
// Simple console output
console.log("Hello Console!");
// Multiple values
console.log("Name:", "John", "Age:", 25);
// Variables and calculations
let x = 10;
let y = 5;
console.log("x =", x);
console.log("y =", y);
console.log("x + y =", x + y);
// Objects and arrays
let person = {name: "Alice", age: 30};
console.log("Person:", person);
Console Output:
Hello Console!
Name: John Age: 25
x = 10
y = 5
x + y = 15
Person: {name: "Alice", age: 30}
🔹 Using document.write()
Write content directly to the HTML document:
<!DOCTYPE html>
<html>
<body>
<h1>My Page</h1>
<script>
document.write("<p>This paragraph was added by JavaScript!</p>");
document.write("<p>Current date: " + new Date() + "</p>");
</script>
<p>This is regular HTML</p>
</body>
</html>Result:
My Page
This paragraph was added by JavaScript!
Current date: Mon Dec 25 2023 10:30:00
This is regular HTML
⚠️ Warning about document.write():
Using document.write() after the page loads will overwrite the entire page. Use it only during page loading or for testing.
🔹 Practical Examples
🔸 Display Current Time
// Update time every second
function showTime() {
let now = new Date();
let timeString = now.toLocaleTimeString();
document.getElementById("clock").innerHTML = timeString;
}
// Update every 1000ms (1 second)
setInterval(showTime, 1000);
🔸 Simple Calculator Output
function calculate() {
let num1 = 15;
let num2 = 7;
let sum = num1 + num2;
let difference = num1 - num2;
let product = num1 * num2;
// Display results
document.getElementById("results").innerHTML =
"<h3>Calculator Results:</h3>" +
"<p>" + num1 + " + " + num2 + " = " + sum + "</p>" +
"<p>" + num1 + " - " + num2 + " = " + difference + "</p>" +
"<p>" + num1 + " × " + num2 + " = " + product + "</p>";
}
🔸 User Input and Output
function greetUser() {
let userName = prompt("Please enter your name:");
let userAge = prompt("Please enter your age:");
if (userName && userAge) {
let message = "Hello " + userName + "! You are " + userAge + " years old.";
document.getElementById("greeting").innerHTML = message;
console.log("User info:", userName, userAge);
}
}
🔹 When to Use Each Method
- innerHTML: Best for updating page content dynamically
- alert(): Good for important messages and simple user interaction
- console.log(): Perfect for debugging and development
- document.write(): Only use during page loading or for testing