Advertisement

Advertisement


JavaScript Output

Javascript allows to display data by various ways, which allows the user to display data in an attractive manner. In Javascript, user can also change something written or specified style of an element even after the loading of the webpage or after an event. Also, you can use pop-ups like alert boxes to display any information.
JavaScript can "display" data in different ways:

JavaScript Output Methods

There are four ways to display data in JavaScript

  • Using an alert box, window.alert().
  • Using document.write().
  • By changing inner HTML, using innerHTML.
  • By using browser console, console.log().

Using window.alert()

This method will display an alert box with some text inside it and an OK button placed below the text. Alert box is used to give any important information to the user. It gets invoked after a specified event and the webpage becomes unoperational until alert box is over the webpage.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Window.alert() output method </title>
</head>
<body>
<h2>Display data using Alert Box</h2>
<script>
window.alert(8 + 4);
</script>
</body>
</html>

Using document.write()

This method is used for testing purposes, it shows the output within the document's body. It normally displays the content within the scope of the body of the page.

Note : It should only be used for testing purposes because although it works normally but if it is used after the document is loaded completely(used with a button) then it will delete all the existing HTML elements from the webpage.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript document.write() output method </title>
</head>
<body>
<h2> Display Using document.write() Method </h2>
<script>
document.write(8 + 4);
</script>
</body>
</html>

Output

JavaScript document.write() output method Examples

Using innerHTML

JavaScript can access any element with a defined ID by using the document.getElementById(id) method and then the CSS/HTML of the selected element can be changed by using innerHTML property with it. This property helps in doing changes even after the webpage gets loaded completely.

The id attribute selects the HTML element with that particular id and the innerHTML property define the HTML content:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript innerHTML Output Method </title>
</head>
<body>
<h2> Display data innerHTML </h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

Output

JavaScript innerHTML Output Method


Using console.log()

It will show the output in the console section of the browser. The console section give information about various errors and warnings related to the webpage. You just have to press the F12 key to open the debugger menu and select 'console' to view the output displayed within the console.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Console.log() Output Method </title>
</head>
<body>
<h2> Activate debugging with F12 </h2>
<p>Select "Console" in the debugger menu. Then click Run again.>/p>
<script>
console.log(8 + 4);
</script>
</body>
</html>

Output

JavaScript Console.log() Output Method

Activate debugging with F12

Select "Console" in the debugger menu. Then click Run again.










Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.