How to Display Output in JavaScript

There may be times when you need to generate output from your JavaScript code. For example, you might wish to examine the value of a variable or send a message to the browser console to assist you in debugging an issue in your running JavaScript code.

There are numerous methods for producing output with JavaScript, such as writing output to the browser window or console, showing output in dialog boxes, creating output in an HTML element, etc.

Here are the different ways JavaScript can display data:

• Writing into an HTML element, using innerHTML.
• Writing into the browser console, using console.log().
• Writing into an alert box, using window.alert().
• Writing into the HTML output using document.write().

Using innerHTML

The document.getElementById(id) method in JavaScript can be used to get an HTML element.
The id attribute defines the HTML element. The innerHTML property defines the HTML content:

<p id="greet"></p>

<script>
// Writing text string inside an element
document.getElementById("greet").innerHTML = "Hello World!";
</script>
// Outputs: Hello World!

Writing Output to Browser Console

Using the console.log() method, you can easily produce a message or write data to the browser console. This is a basic but effective way for producing detailed output. Here’s an example:

// Printing a simple sum in the browser console
console.log(10 + 20);
// Outputs: 30

Displaying Output in Alert Dialog Boxes

You may also use alert dialog boxes to show the user the message or output data. The alert() method generates an alert dialog box. As an example, consider the following example:

// Displaying a simple text message
window.alert("I am an alert box!");
// Outputs: I am an alert box!

Using document.write()

In HTML, the document.write() method is used to insert content or JavaScript code into a document. This method is primarily used for testing. It is used to remove all of the content from an HTML document and replace it with new information.

document.write("I am new text");
// Outputs: I am new text

When you use the document.write() method after the page has been loaded, it will overwrite any existing content in that document. Consider the following example:

<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>

<button type="button" onclick="document.write('Hello World!')">Click Me</button>
// Outputs: Hello World!
// and overwrites any existing content

Note: The document.write() method should only be used for testing.

Conclusion

This article also demonstrates how to use the console.log(), document.write(), document.getElementById(), and window.alert() functions to display output in JavaScript. Depending on your choices, you can generate and display output in JavaScript by writing output to an HTML element, displaying output in alert boxes, or displaying output in the browser console window.

If you are looking for a great resource to learn more about JavaScript, I highly recommend MDN Web Docs – JavaScript.

Thank you for reading, and keep coding.