JavaScript Output

JavaScript Output

In this article, I am going to discuss JavaScript Output with Examples. Please read our previous article where we discussed JavaScript const Keyword in detail. At the end of this article, you will understand the what are the different way JavaScript Display output/data. JavaScript display output in different way such as:

  • using innerHTML, writing output into an HTML element
  • using document.write(), writing output into an HTML element.
  • Using window.alert(), writing and display output into alert box.
  • Using console.log(), writing output into browser developer console.
Using innerHTML in JavaScript

To access an element inside of HTML, JavaScript uses the document.getElementById(id) method this will discuss in the coming chapter.

The id attribute defines the HTML element uniqueness that can by access by using the element Id. The innerHTML property defines the HTML content:

Example:

<html>
<head>
    <title>JavaScript InnerHTML example.</title>
</head>
<body>
    <h1>Inner HTML example Web Page</h1>
    <p>Paragraph Section</p>

    <p id="demo"></p>

    <script>
        document.getElementById("demo").innerHTML = 10 + 30;
    </script>
</body>
</html>

Output:

Using innerHTML in JavaScript

Using document.write()

A string containing context written to the document. It is mainly use for testing.

Calling document.write() after HTML document is loaded, it automatically calls the document.open() which in turn will clear the existing HTML document shown in 2nd example.

Example-1st:

<html>
<head>
    <title>JavaScript document.write() example.</title>
</head>
<body>
    <h1>document.write() HTML example Web Page</h1>
    <p>Paragraph Section</p>


    <script>
        document.write("Mathematics calculation: ", 5 + 6)
    </script>
</body>
</html>

Output:

Using document.write() in JavaScript Output

Example-2nd with document.open():

In the below example the document.write() has got called after the HTML document has loaded so as soon as the button click me is clicked it will clear the existing HTML content with the document.write() method returning output.

Example:

<html>
<head>
    <title>JavaScript document.write() with document.open() example.</title>
</head>
<body>
    <h1>document.write() with document.open() HTML example Web Page</h1>
    <p>Paragraph Section</p>
    <button type="button" onclick="document.write(10 + 45)">click me</button>
</body>
</html>

Output:

document.open() in JavaScript Output

Using window.alert()

window.alert() display output in alert box, so we can use alert box to display data.

We can skip the window keyword as the window object is the global scope object, by default everything that is variables, properties, and methods by belongs to the window object so window keyword is optional. Hence we can direct displaying the data using alert().

Example:

<html>
<head>
    <title>JavaScript alert() example.</title>
</head>
<body>
    <h1>alert() message HTML example Web Page</h1>
    <p>Paragraph Section</p>

    <script>
        alert(10 + 66)
    </script>
</body>
</html>

Output:

Using window.alert()

Using console.log()

The console.log() method is used to log or print messages to the browser console. It can also be used to print objects and other info as well.

For debugging the application, we can call the console.log() method in the browser to display data.

Example:

<html>
<head>
    <title>JavaScript console.log()example.</title>
</head>
<body>
    <h1>console.log() HTML example Web Page</h1>
    <p>Paragraph Section</p>
 
    <script>
        console.log(10 + 66)
    </script>
</body>
</html>

Output:

Using console.log()

In the next article, I am going to discuss JavaScript function* Keyword with examples. Here, in this article, I try to explain JavaScript Output with examples. I hope this JavaScript Output article will helps you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *