Javascript Output

JavaScript output defines ways to display the output of a given code. Output can be displayed using four different modes listed below:

Javascript Output 4 different ways

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

1. innerHTML.

Display output in HTML elements, using the InnerHtML attribute with Example

Example of the innerHTML

Edit it yourself

<!DOCTYPE html>
<html>
<body>

  <h2>Javascript Output</h2>
  <p>Displaying the output in HTML elements, using innerHTML attribute. </p>
  <p id="demo"></p>
  <button type="button" onclick="functionName()">Click Me!</button>


  <script>
    function functionName(){
      document.getElementById("demo").innerHTML = 10 + 10;
    }
  </script>

</body>
</html>

Explanation of the example

JavaScript uses the document.getElementById (id) method to access the HTML element, where id is the value of the id attribute of the HTML tag.

This element can be used if you want to print anything from javascript to html as in the example above..

The id attribute defines the HTML component. The innerHTML property defines HTML content.

In a nutshell, the output can be displayed in HTML elements using document.getElementById(id).innerHTML the HTML feature.

2. document.write()

Display output in HTML elements, using the document.write() attribute with Example

Example of the.document.write()

Edit it yourself

<!DOCTYPE html>
<html>
<body>

  <h2>Javascript Output</h2>
  <p>Displaying the output using document.write() </p>

  <button type="button" onclick="functionName()">Click Me!</button>


  <script>
    function functionName(){
      document.write(10 + 10);
    }
  </script>

</body>
</html>

Explanation of the example

JavaScript lets you write output to an HTML webpage using the document.write () method. Using this method you can write the output directly to the HTML page.

The write () method is to write HTML expressions or JavaScript code into a document. This method is mostly used for testing purposes.

in this example, using document.write()method which is used to write to the webpage directly.

3.window.alert()

Display output in web page, using Displaying alert box. attribute.

Understand through the following example

Example of the window.alert()

Edit it yourself

<!DOCTYPE html>
<html>
<body>

  <h2>Javascript Output</h2>
  <p>Click button to displaying the output using window.alert() </p>
  <button type="button" onclick="functionName()">Click Me!</button>


  <script>
    function functionName(){
      window.alert(10 + 10);
    }
  </script>

</body>
</html>

Explanation of the example

This element is used when you see an output message in a warning box when you perform an action

You can create your webpage to send alert messages to notify users of something using window.alert ()

You need to use the window.alert() method to use this feature.

4.console.log()

Display output in web page, using Displaying alert box. attribute.

Understand through the following example

Example of the console.log()

Edit it yourself

<!DOCTYPE html>
<html>
<body>

  <h2>Javascript Output</h2>
  <p>Displaying the output using console.log() </p>
  <p>You can click the button then learn about the JavaScript console using the following example.</p>
  <button type="button" onclick="functionName()">Click Me!</button>

  <script>
    function functionName(){
      console.log(10 + 10);
    }
  </script>

</body>
</html>

Explanation of the example

Statement written inside the console log will be executed but displayed inside the browser console

You must use the console.log() method to print the console JavaScript

The console.log () method is used to write messages to this console.

Hope you have understood the JavaScript output using this tutorial example.

Javascript Output