Description

When we start working with JavaScript, we get into situations where we need to output some data from JavaScript code during its execution.

Here are the ways we can output data from JavaScript.

  • Writing output to Browser Console
  • Writing output to Browser Window
  • Writing output to Alert Dialog Boxes
  • Writing output directly into HTML elements.

Writing to Browser Console

We can use the console.log() method to write data to the browser console as shown below.

  • To access the browser's console, we need to press the F12 key on the keyword and choose the Console tab.
// Printing a simple text message
console.log("Hello World!");    // Prints: Hello World!

// Printing a variable value 
var x = 10;
var y = 20;
var sum = x + y;
console.log("The value of x is: " + x);    // Prints: 10
console.log("The value of y is: " + y);    // Prints: 20
console.log("The sum is: " + sum);         // Prints: 30

Writing to Browser Window

The method document.write() can be used to write content to the current document as shown below.

  • If this method is used after the page load, then it overwrites the document's existing content.
// Printing a simple text message
document.write("Hello World!");    // Prints: Hello World!

// Printing a variable value 
var x = 10;
var y = 20;
var sum = x + y;
document.write("The value of x is: " + x);    // Prints: 10
document.write("The value of y is: " + y);    // Prints: 20
document.write("The sum is: " + sum);         // Prints: 30

The below example has a button that overwrites the document's content upon a button click.

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

<button type="button" onclick="document.write('Hello World!')">Click Me</button>

Writing to Alert Dialog Boxes

The method alert() can be used to create dialog boxes, which can display messages or output content to the user as shown below.

// Printing a simple text message
alert("Hello World!");    // Display: Hello World!

// Printing a variable value 
var x = 10;
var y = 20;
var sum = x + y;
alert("The value of x is: " + x);    // Display: 10
alert("The value of y is: " + y);    // Display: 20
alert("The sum is: " + sum);         // Display: 30

Writing to HTML Element Using InnerHTML

The HTML element's property innerHTML can be used to insert content to the specific element through JavaScript as shown below.

Before inserting content into an HTML element, it must be selected using any of the JavaScript DOM Selection methods. One such method is getElementById() which selects a method by its id.

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

<script>
    // Writing text into an HTML element
    document.getElementById("greet").innerHTML = "Hello World!";

    // Writing variable value into an HTML element
    var x = 10;
    var y = 20;
    var sum = x + y;
    document.getElementById("result").innerHTML = sum;
</script>

Overall

JavaScript supports different ways to output data from JavaScript code during the execution.

Related Links