Print in JavaScript

By Mukul

Updated on : 14 Oct 2022

10 mins read

Published on : 14 Oct 2022

Introduction to Printing Output

Generally, when we perform some actions on the website, like clicking a button or providing input to a text area, we get some response in return. Similarly, in programming as well, we want to get some response after running our code.

These responses are known as output. The output may be simple plain text, an image, or an entire document file.

In this article, we will explore all the different ways of printing output in JavaScript.

Different Ways to Print Output

When it comes to JavaScript, there are four different ways with which we can print output to the terminal or console.

Using console.log()
Using window.alert()
Using document.write()
Using innerHTML

Now let's explore all of these methods in detail one by one with the help of examples.

console.log()

The console.log() method in JavaScript is used when we want to write a message to the console. Whatever message we want to print to the console, we pass it inside the log() method as an argument.

Let's create a simple example of the console.log() method.

Consider the index.html code shown below.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>console.log() - JavaScript Example</title>
</head>
<body>
        <p>
                Some text.
        </p>
        <script>
                console.log("Hello There!");
        </script>
</body>
</html>

Explanation - In the above code, we have a paragraph tag first and a script tag. Inside the script tag, we have used the console.log() method to print "Hello There!".

Once we run the code, we will see "Some text." printed on the screen, and when we open the browser's console, we will get Hello There!.

Output:

window.alert()

As the name suggests, the windows.alert() method prints the output data as an alert in the browser. Let's see an example.

Consider the index.html code shown below.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>window.alert() - JavaScript Example</title>
</head>
<body>
        <p>
                Some text.
        </p>
        <script>
                window.alert("Welcome to Masai JavaScript Tutorial!")
        </script>
</body>
</html>

Explanation - In the above code, we are making use of the window.alert() method to print the text "Welcome to Masai JavaScript Tutorials" in the browser window.

When we run this code, we will get the following output.

Output:

Here, you can see we get an alert where the message Welcome to Masai JavaScript Tutorial is shown.

One important point to note here is that we can even avoid the window keyword. It's because the window is a global object in JavaScript, so it's allowed to access its method and properties directly.

Consider the index.html code shown below.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>window.alert() - JavaScript Example</title>
</head>
<body>
        <p>
                Some text.
        </p>
        <script>
                alert("Welcome to Masai JavaScript Tutorial!")
        </script>
</body>
</html>

Explanation - As you can see, we have removed the window keyword and when we run this code, we will get the same output as before.

When we run this code, we will get the following output.

Output:

innerHTML()

innerHTML in JavaScript is used to add required texts to the specific HTML element and print it.

Let's say that we have a very simple div, in which we are simply printing a text to the browser screen, and we want to replace the text with the text of our choice. In this case, we can make use of the innerHTML property.

Consider the index.html code shown below.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>innerHTML - JavaScript Example</title>
</head>
<body>
        <div id="simpleDiv">
                This is a simple Div.
        </div>
        <script>
                document.getElementById("simpleDiv").innerHTML = "No, it is more than just a simple div"
        </script>
</body>
</html>

Explanation - In the above code, inside the body tag, we have a div with id simpleDiv, which is printing the text "This is a simple Div.".

Now, instead of this text, suppose we want to print the text of our own. Then, we can make use of the innerHTML. First, we will call the getElementById() method to select the HTML element where we want to make the changes and then assign a new value to the innerHTML property.


document.getElementByID("simpleDiv").innerHTML = "No, it is more than just a simple div"

Once we run the above code in the browser, we would see the following text printed.

Output:

We can even place a numeric value as well in the innerHTML property.

Consider the index.html code shown below.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>innerHTML - JavaScript Example</title>
</head>
<body>
        <div id="simpleDiv">
                This is a simple Div.
        </div>
        <script>
                document.getElementById("simpleDiv").innerHTML = 13
        </script>
</body>
</html>

Explanation - In the above code, I used a numeric expression to be placed as the value of the innerHTML property.

Once we run the above code in the browser, we would see the following text printed.

Output:

document.write()

The document.write() method prints the output text on the browser's webpage. Let's see an example.

Consider the index.html code shown below.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>document.write() - JavaScript Example</title>
</head>
<body>
        <script>
                document.write("Masai School is Awesome.");
        </script>
</body>
</html>

Explanation - In the above code, we are using the document.write() method to print the text "Masai School is Awesome.".

Once we run the code in the browser, we will see the following output.

Output:

Note: If we use document.write() after the webpage has finished loading, it will overwrite everything that is on the webpage. Let's see one example.

Consider the index.html code shown below.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>document.write() - JavaScript Example</title>
</head>
<body>
        <p>
                Some text before the button.
        </p>
        <button onclick="document.write('New text overwrites the existing text');" >
                Click me!
        </button>
</body>
</html>

Explanation - In the above code, there's a p tag and a button tag. Inside the button tag, we have used the onclick method that is calling document.write. Because of this, the document.write() method is only called when we click on the button.

Once we run the code, we will see the text inside the paragraph tag and a button.

Output

Here, this page has finished loading. Now, if we click the button, the document.write() method is called, which will overwrite the existing page content with a new one.

Output

You can see that only "New text overwrites the existing text" is shown now. Because of this behavior, we should never use document.write() after the page has finished loading.

Working of document.write()

In the above code, the p tag is printing some text and the button has an onclick event set up. Here, when we click the button, the document.write() method is called.

Initially, when we run the code, the web page is completely loaded, which will print the text and show the button. At this point, the onclick event is not triggered. Now, when we click the button, the document.write() method is called, which will overwrite everything on the webpage and print the text inside it.

While the above four methods are the ones that are used when we want to print some text or value to the terminal or the console in JavaScript, there's one more method that might give the impression that it is used to print a text to the browser console or your terminal. This method is called the window.print() method.

window.print()

The window.print() method is different from all the methods that are mentioned above as it is used when we want the browser to print the content that we have on the current browser window.

JavaScript ,by default, doesn't have any print method.

Consider the index.html code shown below.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>window.print() - JavaScript Example</title>
</head>
<body>
        <p>
                Some text.
        </p>
        <button onclick="window.print();">
                Click to Print!
        </button>
</body>
</html>

Explanation - In the above code, we have a paragraph tag first, and then inside the script tag, we have created a button with an onclick attribute that calls the window.print().

Once we run the above code in the browser, we would see the following text printed in the browser's console.

Output:

After clicking on the button, you will be prompted with a printing screen that will ask you whether you want to print the content of the current window or not.

Conclusion

In this article, we learned about printing output in JavaScript. We also look into various examples of printing output in JavaScript using different approaches.

Modules

Module 1

Module 2

Module 3

Module 4