JavaScript Output

JavaScript does not provide any built-in print or display functions.

JavaScript Display Options

JavaScript can "display" data in different ways:

  • using window.alert() write to a warning box
  • using document.write(); write to HTML output
  • using innerHTML write to an HTML element
  • using console.log(); write to the browser console

using innerHTML

To access HTML elements, JavaScript can use document.getElementById(id) method.

id Properties define HTML elements. The innerHTML property defines HTML content:

Example

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

Try It Yourself

Hint:Changing the innerHTML property of an HTML element is a common method for displaying data in HTML.

Use document.write()

For testing purposes, use document.write(); It is more convenient:

Example

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

Try It Yourself

Note:after the HTML document is fully loaded document.write(); UseDelete all existing HTML :

Example

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<button onclick="document.write(5 + 6)">Try It</button>
</body>
</html>

Try It Yourself

Hint:document.write(); Methods are only for testing purposes.

Use window.alert()

You can use alert boxes to display data:

Example

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

Try It Yourself

Use console.log()

In the browser, you can use console.log(); Methods to display data.

Please activate the browser console by pressing F12 and select 'Console' from the menu.

Example

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>

Try It Yourself