JavaScript gives us several ways to display messages or results on a webpage. Each method has a specific purpose, whether it's for debugging, showing alerts, or updating content on the page.
JavaScript has a few main ways to show output. While there are other methods, they are not recommended, so it's best to stick to the commonly used ones for better results.
Table of Content
- JavaScript innerHTML Property
- JavaScript console.log() Method
- JavaScript document.write() Method
- JavaScript window.alert() Method
- JavaScript window.print() Method
- JavaScript window.prompt() Method
JavaScript innerHTML Property
The innerHTML property is used with HTML elements. JavaScript can select an element using the document.getElementById(id) method and then use innerHTML to display the output on the selected element.
Syntax:
document.getElementById("id").innerHTML;Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Output</title>
</head>
<body>
<h2>Display Output using innerHTML Property</h2>
<<<<<<< HEAD
<p id="Coding75"></p>
<script>
document.getElementById("Coding75").innerHTML = "Hello Geeks!";
=======
<p id="message"></p>
<script>
document.getElementById("message").innerHTML = "Hello, World!";
>>>>>>> 6c9caef (content Overview Complete)
</script>
</body>
</html>
JavaScript console.log() Method
The console.log() method is used for logging messages to the console, primarily for debugging purposes.
Syntax:
console.log();Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Output</title>
</head>
<body>
<h2>Display Output using console.log() Method</h2>
<script>
<<<<<<< HEAD
console.log("Hello Coders!");
=======
console.log("Hello, World!");
>>>>>>> 6c9caef (content Overview Complete)
</script>
</body>
</html>
JavaScript document.write() Method
The document.write() method is used to write content directly to an HTML document while it is being parsed.
Note: If used after the document is fully loaded, it will overwrite the entire page.
Syntax:
document.write();Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Output</title>
</head>
<body>
<h2>Display Output using document.write() Method</h2>
<script>
document.write("Hello Coders!");
</script>
</body>
</html>JavaScript window.alert() Method
The window.alert() method displays an alert box with a message and an OK button.
Syntax:
window.alert();Note: The window keyword is optional.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Output</title>
</head>
<body>
<h2>Display Output using window.alert() Method</h2>
<script>
window.alert("Hello Coders!");
</script>
</body>
</html>JavaScript window.print() Method
The window.print() method opens the browser’s print dialog.
Syntax:
window.print();Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript window.print() Method</h2>
<button onclick="window.print()">Click here to Print</button>
</body>
</html>JavaScript window.prompt() Method
The window.prompt() method displays a dialog box for user input and returns the entered text as a string.
Note: This method captures user input but does not directly display output.
Syntax:
window.prompt();Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Output</title>
</head>
<body>
<h2>Display prompt box for user input</h2>
<script>
let userInput = window.prompt("Please Enter your Input");
if (userInput !== null) {
window.alert("Hello, " + userInput + "!");
} else {
window.alert("You clicked Cancel or closed the prompt.");
}
</script>
</body>
</html>Understanding how to display output in JavaScript is important for creating interactive websites. You can use console.log() for debugging, alert() for pop-up messages, document.write() for quick testing (though not recommended for real projects), and HTML element updates to dynamically change webpage content.