JavaScript

How to display output in JavaScript

You may need to display output from your JavaScript code in certain situations. For instance, when you want to send a message to your browser console to assist you in debugging errors or checking the value of a variable using your JavaScript code, and so on. There are different ways to generate and display output in JavaScript, including writing output to an HTML element, displaying output in alert boxes, or the browser console window.

This write-up will demonstrate how to display output in JavaScript using console.log(), document.write(), document.getElementById(), and window.alert() function. So, let’s start this guide!

What are the possibilities to display output in JavaScript

You can display output in JavaScript using any of the following ways:

  • To display output in the browser console, you can use the “console.log()” function.
  • To write out into HTML and display its output, you can use the “document.write()” function.
  • To write into an HTML element and display its output, you can use the “document.getElementById()” function with the “.innerHTML” property.
  • To display output into an alert box, you can use the “window.alert()” function.

How to display output in JavaScript using console.log()

In JavaScript, the “console.log()” function is utilized for displaying any output or printing the values of any variable defined in the program. The “log()” method in console.log() takes the parameter which comprises the data you want to output. Most JavaScript developers use the specified function to list errors and debugging purposes.

Syntax of console.log()

Here is the syntax of console.log() in JavaScript:

console.log("Parameter")

The “console.log()” function accepts a “Parameter,” which can be any message, object, or array, and it then returns or outputs the value of the given parameter to the console window.

Example: Displaying output in JavaScript using console.log()

In the below-given example, we will use the console.log() function to output the “This is linuxhint.com” message on our webpage. For this purpose, we will create a “testfile.html” file in our favorite code editor such as VS Code, then write out the following code in it:

<!DOCTYPE html>

<html>

<body>

<script>

console.log("This is linuxhint.com");

</script>

</body>

</html>

After adding the code, press “CTRL+S” to save the added code in the “testfile.html”. Next, click on your file and open it in your favorite browser by double-clicking on the HTML file.

A blank web page will open for your “testfile.html” file. From the right-click menu, choose the “Inspect” option to open up the Developer tools of your browser directly:

Now, move to the “Console” tab of the developer options. It will display the message which we have added as a parameter to the “console.log()” function:

How to display output in JavaScript using document.write()

In JavaScript, the “document.write()” function is used for inserting any content or JavaScript code in a document. The “document.write()” function removes all existing content from the HTML document and replaces it with the new content added as a parameter. This method is mainly employed for testing purposes.

Syntax of document.write()

Now, check out the syntax of the document.write() function:

document.write(Exp1,Exp2,...)

The “document.write()” function can contain multiple parameters. The expression arguments such as “Exp1” and “Exp2” will be displayed as output in their added sequence.

Example: Displaying output in JavaScript using document.write()

In the following example, as soon as our web page gets loaded, the “document.write()” function will clear all data of the web page and rewrite it with the content which we have added as the parameter:

<!DOCTYPE html>

<html>

<body>

<h1>linuxhint</h1>

<script>

document.write("This is linuxhint.com");

</script>

</body>

</html>

As we have added “This is linuxhint.com” as a parameter in our “document.write()” function, it will display the following output:

How to display output in JavaScript using document.getElementById()

The “document.getElementById()” in JavaScript is utilized for returning the Element object, whose “Id” gets matched with the provided string. The Element Ids are useful for quickly accessing the specified element, and thus they can be used with the “.innerHTML” property to write or display its output.

Syntax of document.getElementById()

Let’s have a look at the syntax of document.getElementById() function in JavaScript:

document.getElementById(id)

Here, the attribute “id” defines the HTML element which can be used for inserting or writing output within the specified element:

Example: Displaying output in JavaScript using document.getElementById()

In the following example, we have added an element with the id “test”. After doing so, the “document.getElementById(test)” method will select our HTML element having id=test”. Then, the “.innerHTML” property is added to write out the specified string in it:

<!DOCTYPE html>

<html>

<body>

<h1>Linuxhint</h1>

<p id="test"></p>

<script>

document.getElementById("test").innerHTML = "This is linuxhint.com";

</script>

</body>

</html>

The below-given image indicates that we have successfully added the “This is linuxhint.com” string in our selected element:

How to display output in JavaScript using window.alert()

The window.alert() method displays output or any information to the user. It shows the added message in an alert box having the “OK” button. The alert box forces the user to read the displayed message, and the user cannot access the web page until the alert box is closed.

Syntax of window.alert()

To use alerts for your web page, follow the below-given syntax:

window.alert("Parameter")

Here, in the “Parameter”, pass the information you want to display in the added alert box.

Example: Displaying output in JavaScript using window.alert()

In this example, we have added an alert box that will pop up on the web page showing “This is linuxhint.com” as its content:

<!DOCTYPE html>

<html>

<body>

<h1>Linuxhint</h1>

<script>

window.alert("This is linuxhint.com");

</script>

</body>

</html>

When the window.alert() pop up will appear on our web page, then any code written after the window.alert() does not get executed until you close the alert by pressing the “OK” button:

Conclusion

This write-up discussed how to display output in JavaScript using console.log(), document.write(), document.getElementById(), and window.alert() functions. The procedure of using console.log(), document.write(), document.getElementById(), and window.alert() functions for displaying output in JavaScript are also demonstrated in this article. Based on your preferences, you can generate and display output in JavaScript, by writing output to an HTML element, displaying output in alert boxes, or the browser console window.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.