Javascript Output

Like most of the programming language, Javascript can execute data and send them to the user display. In Javascript, you can display Javascript output data in a variety of ways.

Each way uses different method and function to display data on the screen:

  • document.write() function
  • document.GetElementById('id").innerHTML method
  • varName.textContent method
  • window.alert() function
  • console.log() method

The above popular methods and functions can be used to display Javascript result to the screen. Let’s see examples of how they work:

document.write()

using document.write() function you can directly display data in an HTML page. This method does not target a specific HTML element, tag, attribute to place data. For this reason, this method will replace all the contents written in HTML tags in case if you use an event with this method.

Example:

<!DOCTYPE html>
<html>
  <body>
    <p>This content won't be deleted, because there is no event</p>
    <script>
      document.write("50 + 50");
     </script>
  </body>
</html> 

 

Output

This content won’t be deleted, because there is no event
100

In the above example, the content of <p> won’t be deleted because there is no event exist. If there is an event, let’s see what will happen:

Example:

<!DOCTYPE html>
<html>
  <body>
    <p>This content will be deleted after button click.</p>
    <button type="button" onclick="document.write(50 + 50)">click me!</button>
  </body>
</html>

 

Output:

This content will be deleted after button click.

 

The content within <p></p> tag will be deleted. Similarly, all the other elements will be deleted if exist.

Remember: This document.write() method only use for testing purpose. It is not reliable for printing out value. But have a usage in some special cases.

document.GetElemetById.innerHTML

Using innerHTML method you can target a specific HTML element to place data provided by Javascript.

Example:

<!DOCTYPE html>
<html>
<body>
<p id="target"></p>
<script>
document.getElementById("example").innerHTML = "Hello, World";
</script>
</body>
</html> 

 

Output:

Hello, World

In the above example, first, the Javascript function targets the example HTML id for placing the data. Then calls the innerHTML property for placing into inside the example id element. Finally place the “Hello, World” message into the empty <p id="example"></P> element.

varName.textContent()

To use this method, you have to target an HTML entity by calling the function document.querySelector() and assign it to a variable. Then finally print data to the targetted element by invoking varName.textContent function. Let’s see an example,

Example:

<!DOCTYPE html>
<html>
<body>
<content></content>
<script>
   var myHeading = document.querySelector('content');
   myHeading.textContent = 'Hello world!';
</script>
</body>
</html> 

 

window.alert()

It is a popular display function in Javascript to display a toast popup window to the users. It is often used to warn users or ask to confirm something in web application.

To do this, we have to call the window.alert() function. That’s it. You can directly place in the script tag to give a popup to users on page load. Or you also can implement in a button click. Let’s see an example,

Example:

<!DOCTYPE html>
<html>
  <body>
    <p>This will popup a confirm tost alert</p>
   <button type="button" onclick="window.alert('Hi there, \ 
     Welcome to PrograCoding!')">Click Me!</button>
  </body>
</html> 

 

Output:

This will popup a confirm tost alert

 

console.log()

This the most useful feature of Javascript. console.log() function used in Javascript for debugging and also for displaying data in the developer console. We will learn detail about debugging in the later chapters.

To display Javascript output in dev console, simply call the console.log() command in the script tag. See the example below,

Example:

<!DOCTYPE html>
<html>
  <body>
    <script>
       <button type="button" onclick="console.log(15 + 25)">Click me!</button>
    </script>
  </body>
</html>

 

Output:

Notice that, you won’t see any output in the browser window. The expected output was 40. Yes, the output will be 20. But you can see this in the developer console.

To see the output of the above code, press F12 from your keyboard to enable the developer console. Then click on the “Click me!” button to see the output in the console.

« Previous Next »