JS Output

JavaScript Output and Display Possibilities

JavaScript can "display" or output data in several different ways. Depending on what you are trying to achieve—whether it's updating the webpage content, showing a popup message, or debugging code—you will choose a different method.

Here are the four primary ways to output data in JavaScript:

• Writing into an HTML element, using innerHTML or innerText.
• Writing directly into the HTML output using document.write().
• Writing into an alert box, using window.alert().
• Writing into the browser console, using console.log().

1. Using innerHTML

To access an HTML element, you can use the document.getElementById(id) method. Use the id attribute to identify the specific HTML element you want to target.

Then, use the innerHTML property to change the HTML content of that element.

Note: Changing the innerHTML property of an HTML element is the most common way to display data in HTML.

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

<script>
document.getElementById("demo").innerHTML = "<h2>Hello World</h2>";
</script>

2. Using innerText

Similar to innerHTML, you use the document.getElementById(id) method to access an HTML element. However, you use the innerText property when you only want to change the plain text of the element, without parsing any HTML tags.

Note: Use innerHTML when you want to insert or change an HTML element. Use innerText when you only want to change the plain text.

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

<script>
document.getElementById("demo").innerText = "Hello World";
</script>

3. Using document.write()

For testing purposes, it is convenient to use document.write(). It outputs data directly into the HTML document.

<script>
document.write(5 + 6);
</script>

⚠️ Warning: Overwriting HTML

Using document.write() after an HTML document is fully loaded will delete all existing HTML on the page. Therefore, the document.write() method should only be used for testing.

<button type="button" onclick="document.write(5 + 6)">Try it</button>

4. Using window.alert()

You can use an alert box to display data. This will pop up a dialog box in the user's browser.

<script>
window.alert(5 + 6);
</script>

Skipping the window Keyword

In JavaScript, the window object is the global scope object. This means that variables, properties, and methods by default belong to the window object. This also means that specifying the window keyword is optional:

<script>
alert(5 + 6);
</script>

5. Using console.log()

For debugging purposes, you can call the console.log() method in the browser to display data. You will learn more about debugging in a later chapter.

<script>
console.log(5 + 6);
</script>

JavaScript Print

JavaScript does not have any print object or print methods. You cannot access output devices from JavaScript.

The only exception is that you can call the window.print() method in the browser to print the content of the current window.

<button onclick="window.print()">Print this page</button>