JavaScript Generating Output

Generating Output in JavaScript

There are certain situations in which you may need to generate output from your JavaScript code. For example, you might want to see the value of variable, or write a message to browser console to help you debug an issue in your running JavaScript code, and so on.

In JavaScript there are several different ways of generating output including writing output to the browser window or browser console, displaying output in dialog boxes, writing output into an HTML element, etc. We’ll take a closer look at each of these in the following sections.

Writing Output to Browser Console

You can easily outputs a message or writes data to the browser console using the console.log() method. This is a simple, but very powerful method for generating detailed output. Here’s an example:

Example

// Printing a simple text message
console.log("Hello World!"); // Prints: Hello World!

// Printing a variable value 
let x = 10;
let y = 20;
let sum = x + y;
console.log(sum); // Prints: 30

Tip: To access your web browser’s console, first press F12 key on the keyboard to open the developer tools then click on the console tab. It looks something like the screenshot here.

---

Displaying Output in Alert Dialog Boxes

You can also use alert dialog boxes to display the message or output data to the user. An alert dialog box is created using the alert() method. Here’s is an example:

Example

// Displaying a simple text message
alert("Hello World!"); // Outputs: Hello World!

// Displaying a variable value 
let x = 10;
let y = 20;
let sum = x + y;
alert(sum); // Outputs: 30

---

Writing Output to the Browser Window

You can use the document.write() method to write the content to the current document only while that document is being parsed. Here’s an example:

Example

// Printing a simple text message
document.write("Hello World!"); // Prints: Hello World!

// Printing a variable value 
let x = 10;
let y = 20;
let sum = x + y;
document.write(sum); // Prints: 30

If you use the document.write() method method after the page has been loaded, it will overwrite all the existing content in that document. Check out the following example:

Example

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

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

---

Inserting Output Inside an HTML Element

You can also write or insert output inside an HTML element using the element’s innerHTML property. However, before writing the output first we need to select the element using a method such as getElementById(), as demonstrated in the following example:

Example

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

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

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

You will learn about manipulating HTML element in detail in JavaScript DOM manipulation chapter.