JavaScript output means displaying data or result using JavaScript.
JavaScript can show output in different places, such as inside an HTML element, inside an alert box, in the browser console, or directly on the web page.
Output is useful when you want to show messages, results, calculations, or dynamic content to users.
The document.write() method is simple for learning, but it should not be used much in real projects.
If document.write() is used after the page has loaded, it can overwrite the entire page content.
Example
Example
html
<!DOCTYPEhtml><html><head><title>document.write Example</title></head><body><h1>JavaScript document.write</h1><buttononclick="document.write('The old page content is replaced.')">
Click Me
</button></body></html>
Use this example in the Try It Editor to understand how document.write() behaves.
Using window.alert()
The window.alert() method displays output in an alert box.
It is commonly used for simple messages or warnings.
Example
Example
html
<!DOCTYPEhtml><html><head><title>JavaScript Alert</title></head><body><h1>JavaScript Alert Output</h1><buttononclick="window.alert('Welcome to JavaScript!')">
Show Alert
</button></body></html>
You can also write alert() instead of window.alert().
Example
Example
javascript
alert("Hello JavaScript!");
Both alert() and window.alert() work in the browser.
Using console.log()
The console.log() method displays output in the browser console.
It is mostly used by developers for testing and debugging code.
Example
Example
html
<!DOCTYPEhtml><html><head><title>JavaScript Console</title></head><body><h1>JavaScript Console Output</h1><script>
console.log("Hello from the console!");
</script></body></html>
To see the result, open the browser Developer Tools and check the Console tab.
Output of a Calculation
JavaScript can also display the result of calculations.
Example
Example
html
<!DOCTYPEhtml><html><head><title>JavaScript Calculation Output</title></head><body><h1>Calculation Output</h1><pid="result"></p><script>
let a = 10;
let b = 20;
let total = a + b;
document.getElementById("result").innerHTML = total;
</script></body></html>
Output with Text and Variables
You can combine text and variables in JavaScript output.
Example
Example
html
<!DOCTYPEhtml><html><head><title>Text and Variable Output</title></head><body><h1>JavaScript Output</h1><pid="demo"></p><script>
let course = "JavaScript";
document.getElementById("demo").innerHTML = "I am learning " + course;
</script></body></html>
In this example, the + operator joins text and variable values together.
Output with Template Literals
Template literals allow you to write variables inside a string using backticks.
Example
Example
html
<!DOCTYPEhtml><html><head><title>Template Literal Output</title></head><body><h1>JavaScript Template Literals</h1><pid="demo"></p><script>
let name = "Amit";
let course = "JavaScript";
document.getElementById("demo").innerHTML = `Hello ${name}, welcome to ${course}.`;
</script></body></html>
Template literals are easier to read when you need to combine text and variables.
Complete Example
Example
html
<!DOCTYPEhtml><html><head><title>JavaScript Output Example</title></head><body><h1>JavaScript Output Methods</h1><pid="message">Click the button to display output.</p><buttononclick="showOutput()">Show Output</button><script>
function showOutput() {
let name = "JavaScript";
document.getElementById("message").innerHTML =
"Output displayed using " + name + ".";
}
</script></body></html>
Which Output Method Should You Use?
Different output methods are used for different purposes.
Method
Best Use
innerHTML
Showing content on a web page
document.write()
Simple learning examples
alert()
Showing quick messages
console.log()
Testing and debugging code
For real web pages, innerHTML or other DOM methods are usually better than document.write().
Try It Yourself
Run the examples in the Try It Editor.
Try changing the text, numbers, variable names, and output methods to understand how JavaScript displays results.
Important Notes
JavaScript can display output in different ways.
The innerHTML property is commonly used to update HTML content.
The document.write() method is simple but not recommended for modern web projects.
The alert() method shows a popup message.
The console.log() method is useful for debugging.
Common Mistakes
Beginners often forget to create an HTML element before selecting it with JavaScript.
