JavaScript Tutorial

JS Displaying Output

Learn how JavaScript displays output using different methods such as innerHTML, document.write(), alert(), and console.log(). These techniques help you show messages, update content, and debug your code.

JavaScript Output Methods

JavaScript provides several ways to display output to users or developers. Each method is used for a different purpose depending on whether you want to update the webpage, show a popup, or debug in the console.

1. Using innerHTML

The most common way to display output is by inserting text or HTML into an element.

document.getElementById("demo").innerHTML = "Hello JavaScript!";

Use this when you want to update content on the webpage dynamically.

2. Using document.write()

Writes directly into the HTML document.

document.write("This is JavaScript output");

⚠️ Do not use this after the page has loaded, because it can overwrite the entire webpage.

3. Using window.alert()

Displays output inside a popup alert box.

alert("This is an alert message");

Useful for simple notifications and testing small code snippets.

4. Using the Browser Console

You can output text to the console for debugging.

console.log("Hello from console");

Developers use this method to inspect values and debug issues.

5. Using innerText

Displays plain text inside an element.

document.getElementById("demo").innerText = "Plain text output";

6. Using textContent

Another safe method to display pure text inside an element.

document.getElementById("demo").innerText = "Plain text output";

Summary of Methods

Method	Description
`innerHTML`	Inserts HTML/text inside an element
`document.write()`	Writes to the webpage directly
`alert()`	Shows a popup message
`console.log()`	Displays debugging output
`innerText`	Shows plain text
`textContent`	Shows safe & fast plain text

Note: Use innerHTML for updating webpage content.

Use console.log() for debugging instead of showing messages to users.

Avoid using document.write() on modern websites after the page loads.

Use innerText or textContent when you need plain text output.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Displaying Output</h2>

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

<button onclick="showOutput()">Show Output</button>

<script>
function showOutput() {
    document.getElementById("demo").innerHTML = "Output using innerHTML";
    console.log("Output displayed using console.log()");
    alert("Output using alert()");
}
</script>

</body>
</html>

JavaScript Displaying Output

Displaying or generating output in JavaScript is very important especially when learning the language.
For example, if you want to see if your JavaScript statements or code blocks are correct, you can output data to check.

In JavaScript, there are 4 ways of display output:

By using the console.log() function we can write into the browser's developer console.

1 Using Console Example

EXAMPLE play_arrow Run Code

<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>
</head>
<body>
   

   <script>
      var x = 5;
      var y = 5;
      var sum = x + y; // adds x and y
                          
      console.log(sum); // prints 10
   </script>
</body>
</html>

However, the output of console.1log() cannot be seen on mobile devices because the developer console is only available on desktop browsers like Chrome and Firefox.

By using the alert() function, we can output data on a dialog box.

Using Dialog Boxes Exampke

EXAMPLE play_arrow Run Code

<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>
</head>
<body>
   <button type="button" onclick="myFunc()"> Show Dialog Box </button>

   <script>
      function myFunc() {
         var x = 5;
         var y = 5;
         var sum = x + y; // adds x and y
      
         alert(sum); // shows 10
      }
   </script>
</body>
</html>

By using the innerHTML property, we can change the content or text of the selected element.

We can use the document .getElementById() function to select an element.

3 Writing to HTML Elements Example

EXAMPLE play_arrow Run Code

<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>
</head>
<body>
   <p id="demo"></p>
   <button type="button" onclick="myFunc()"> Write </button>

   <script>
      function myFunc() {
         var x = 5;
         var y = 5;
         var sum = x + y; // adds x and y
                       
         document.getElementById("demo").innerHTML = sum; // writes 10
      }
   </script>
</body>
</html>

You can also write the text onto the next line if it is too long:

Text too long Example

EXAMPLE play_arrow Run Code

<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>
</head>
<body>
   <p id="demo"></p>

   <script>
      document.getElementById("demo").innerHTML =
      "Hello world, this text is too long."; 
   </script>
</body>
</html>

By using the document.write() function, we can write to the content of the document.

Note! This should only be used for testing purposes as it will delete all exising HTML in the current page.

4 Writing to the Browser Window

EXAMPLE play_arrow Run Code

<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>
</head>
<body>
   <p id="demo"></p>
                   <button type="button" onclick="myFunc()"> Write </button>

   <script>
      function myFunc() {
         var x = 5;
         var y = 5;
         var sum = x + y; // adds x and y
                                        
         document.write(sum); // writes 10 to the page
      }
   </script>
</body>
</html>

Explanation

In the example, clicking the button calls the showOutput() function.

innerHTML updates the text inside the <p> element.

console.log() sends output to the browser console.

alert() displays a popup message.

These are the most commonly used methods for displaying output in JavaScript.

chevron_left JS Writing Code JS Statements chevron_right