What is JavaScript Output and Output Types? | JavaScript Tutorial


Do you know how many types or ways of displaying JavaScript code on the screen? If not, you will learn after reading this “JavaScript Output Tutorial” article completely.

If you are a cable beginner to learning JavaScript language, then this one of the most important lesson for you. If you skip this chapter, you will find HTML element, alert message, console etc. There may be a problem displaying the output. 

Display JavaScript Output

Code written in the JavaScript language defines ways to display the output. The output of JavaScript code can be displayed using four different methods, which are listed below:

  1. innerHTML
  2. document.write()
  3. console.log()
  4. window.alert()

Let's understand how and where these four types of JavaScript output are used:

1. Display output in HTML elements using innerHTML


Syntax:

 document.getElementById(id) 

To access an HTML element, in JavaScript document.getElementById(id) method can be used.

In this, the ID attribute defines the HTML element. You can use the innerHTML attribute to display more data.

Example of innerHTML attribute to display data:

 
<!DOCTYPE html>
<html>

<head>
 <title>
  JavaScript Output using innerHTML
 </title>
</head>

<body>
<center>

<h2>Learn Coding Through WebDevLesson</h2>
<h3>
JavaScript Output Display Possibilities Using innerHTML
</h3>

<p> www.webdevlesson.com </p>
<hr>

<p id="WdL"></p>

<!-- Script to uses innerHTML -->
<script>
document.getElementById("WdL").innerHTML
= 16 + 2;
</script>
</center>
</body>

</html>

After copying the given code, paste it in the text editor and save the file as javascript.html and open it in the browser.

The output will display something like this:


2. document.write() display output using

It is used for simple text and testing purpose.

Syntax:

document.write


Understand with example:

<!DOCTYPE html>
<html>
<head>
 <title>Display JavaScript output Using document.write()</title>
</head>
<body>
  <center>
<script>
// Simple text message..
 document.write("Welcome to JavaScript Tutorial by Web Dev Lesson");
 document.write("<br>");
 document.write("www.webdevlesson.com");
 document.write("<hr>")
// Variable value..
 var x = 5;
 var y = 10;
 var sum = x * y;
  document.write(sum);
</script>
</center>
</body>
</html>

In this example, simple text and Variable are also used.

Output:


3. Display output using window.alert()

You can display the content by using JavaScript window.alert() to display the Alert box.

Syntax:

window.alert()

You can omit the window keyword if you want, it is optional.

Example:

<!DOCTYPE html>
<html>
<head>
 <title>Writing into an Alert Dialog Box with JavaScript</title>
</head>
<body>
<center>
 <h2>JavaScript alert output</h2>
 <p>www.webdevlesson.com</p>
</center>
  
<script>
// Displaying a simple text alert message
 alert("Hello World!");
  
// Displaying a value alert
window.alert(5 + 6);
    
// Displaying a variable value alert
var x = 2;
var y = 2;
var sum = x + y;
 alert(sum);

</script>
  
</body>
</html>


Output:



4. Display output using console.log()

You can use this property to output in the web browser console. It is used for debugging purposes.

That is, the JavaScript output from this is in the console, not in the HTML document.

Syntax:

console.log()

Example:


<!DOCTYPE html>
<html>
  
<head>
 <title>
  JavaScript Output using innerHTML
 </title>
</head>

<body>
<center>
<p> Example of console.log() </p>

<h2>JavaScript Display Output Using console.log()</h2>
<p>www.webdevlesson.com</p>

<p id="TiH"></p>
  
<!-- Script to use console.log() -->
<script>
 console.log(2+2);
</script>
</center>
</body>

</html>          

In this tutorial of yours (JavaScript Output), teach that JavaScript code can be displayed using four different methods to output to display . For example, the JavaScript innerHTML method is used to display HTML elements.

document.write() is used for simple text and testing purpose. Similarly window.alert() is used to display alert box and console.log() is used for debugging purposes.

I hope you understand how JavaScript code is outputted through these four types.