In our introductory article, we said JavaScript is a vast language that you can integrate with HTML to get output on the browser. We also discuss using the.js file to write output to the terminal.

In this tutorial, you’ll learn about JS output and how to get the output of JS code. So let’s get started with JS outputs.

What is JavaScript Output?

Simply put, “JS Output” refers to different ways you can make the compiler produce results for code you write with JavaScript. A typical illustration of JavaScript output is the use of ATMs: you click on certain buttons in an ATM and expect cash from the machine. 

In JavaScript, you can get output by using the following:

innerHTML()
document.write()
window.alert()
console.log()

Before you start using any of these output methods, it is assumed that you have a basic understanding of HTML. But if you are yet to learn HTML, prepare to gain knowledge of HTML after learning JavaScript. To help you understand it better, we’ll list the essential HTML features needed to get the work done.

<!DOCTYPE html>
<html>
<head>
 
</head>
 
<body>
<h2>Demo JavaScript in Body</h2>
 

 
</body>
</html>

Above is an HTML template that displays the text in the h2 tag on your browser screen when you debug the code from your VS code. To write JavaScript codes in this HTML document, you will include your codes in a script tag, just as we explained in our introductory article.

The script tag can only be inserted inside the body or head sections and cannot be outside the HTML tag.

Let’s confirm that your VS code can get this HTML code compiled and that you get the output on your browser.

> Create a new folder on your desktop and give it any name( Mine is called JavaScript tutorial)

> Open your VS code and click on the open folder option. Ensure you open the folder you just saved.

> Create a new file by clicking the file icon in the upper left corner of your screen.

> Go ahead and run your code.

JS Output: Examples

Using innerHTML for JS Output

For the first example, we will be using the innerHTML. To get the output using innerHTML, we use a special function called the document.getElementById().

<!DOCTYPE html>
<html>
<body>

<h1>How to use the innerHTML element to display data on a Web Page</h1>

<!-- This an HTML tag where we intend to display the result -->
<p id="ShowOutput"></p>


<!--Enter your JavaScript code here-->
<script>
  // This line of code uses the getElementById.innerHTML to display the the output to the user
document.getElementById("ShowOutput").innerHTML = 54 + 21;
</script>

</body>
</html>

Using document.write for JS Output

The document.write function is best for testing code because it simply prints the intended output on a web page.

<!DOCTYPE html>
<html>
<body>

<!-- document.write example -->
<h2>This output is obtained using the document.write</h2>
<script>
  // This line of code uses the document.write to display the the output to the user
  document.write(5 + 6);
  </script>

</body>
</html>

Using window.alert() for JS Output

When you call window.alert(), a dialog box with the solution appears and stays there until you click OK or refresh the page.

Since the window object is a global object in JavaScript, you can use just alert() to get similar results.

<!DOCTYPE html>
<html>
<body>


<!-- window.alert example -->
<h2>This output is obtained using the window.alert</h2>
<script>
  // This line of code uses the window.alert to display the the output to the user
  window.alert(5 + 6);
  </script>

<!-- you can also use just alert() to get similar result like in the sample code below  -->
<script>
  window.alert(5 + 6);
  </script>
  
  </body>
</html>

Using console.log() for JS Output

 The console.log() method is different from the other three JS output types. It displays results in the developer aspect of the browser.

To see the output, enter fn+f12.

<!DOCTYPE html>
<html>
<body>

<h1>How to use the console.log element to display data on a browser</h1>

<i>The console.log() method does not display output here, just like document.write, innerHTML, and window.alert(). Enter fn+f12 on your computer to view output</i>



<script>
  // The console.log() method does not display output here, just like document.write, innerHTML, and window.alert(). Enter fn+f12 on your computer to view output
  console.log(5 + 6);
  </script>
 
</body>
</html>

How to Get JS Output in your VS code without visiting browsers

It was mentioned at the outset of this tutorial that you could choose to learn javascript as a standalone language. You can use the console.log() in a .js file to print the results in your development environment. 

To do this, create a new file and ensure it ends with .js. To run the file, enter f5. Choose Node.js if you are presented with the Select Debugger screen.

Here is the output of the above code

Conclusion

In this tutorial, we learned how to display or get the output of code we write using JavaScript. In our next article, we will look at JS statements and syntax.

Categorized in:

JavaScript