New Tutorials:   KOTLIN    JAVASCRIPT    SASS/SCSS    PL/SQL  
See the Tutorial List

Output in JavaScript

We can get JavaScript Output in 4 simple and different ways on a webpage and these are given below. We can use them according to the application requirement. In this tutorial, we will be learning the following four different ways of getting output from JavaScript code, just like we use printf() in C language, cout in C++, etc.

  1. Using innerHTML property

  2. Using document.write() method

  3. Using Alert Box

  4. By logging on the Console

We will cover all these with the help of examples. Also, don't worry if you don't understand the syntax for these, we will be covering these in details in upcoming tutorials.

1. JavaScript innerHTML Property

JavaScript lets you write into an HTML element by using innerHTML property. We can add anything we want, it can be a text message, some HTML element or anything else.

To do that first you need to provide a specific Id to the HTML element that you want to access by the JavaScript code.

To access an HTML element JavaScript uses document.getElementById(id) method, where id is the value of the id attribute of the HTML tag.

Let's take an example, in this example, id attribute is used to identify the HTML element and innerHTML property is used to set content to it.

This way, if you are writing JavaScript code for doing some processing or if you have any logic, you can easily show the output in the HTML webpage.

2. JavaScript Output using document.write()

JavaScript lets you write any outout into the HTML webpage by using the document.write() method. By using this method you can directly write output to the HTML page.

The write() method writes the HTML expressions or JavaScript code to a document. This method is mostly used for testing purposes.

Let's take an example, in this example, we are using document.write() method which is used to write to the webpage directly.

3. JavaScript Output via Alert Box

There are certain websites that give you alert messages when you access them or when you perform some action you see the output message in alert boxes. You can also make your webpage to send alert messages to notify something to the user using JavaScript, to use this feature you need to use the window.alert() method.

Let's take an example, in this example, we are using the alert box to write a message and show to the user.

4. JavaScript Console Logging

JavaScript also lets you create console logs which can be seen in the browser's developers' tools(Console) for debugging purposes. The statement written inside a console log will be executed but would not be displayed in the browser instead it will be displayed inside the console of the browser.

The function used for console logging is console.log(SOME-EXPRESSION-OR-STRING) which can be used to log anything in the browser's console.

To open developer's tools in the Chrome browser, press F12 in Windows and Command + Option + I in MacOS. The picture below shows how it looks:

JavaScript Console Log example

Let's take an example to see the JavaScript code to print logs in the console:

<html>
<head>
    <title>JavaScript console example</title>
    <script>
        console.log(2+3);
    </script>
</head>
<body>
    <!-- HTML body -->
</body>
</html>


5

Conclusion:

In this tutorial, we learned how to show output to the user using JavaScript in various different ways. All the examples are included for a better understanding of the topic.