JavaScript Output - Print to Console
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 different ways to display output 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>
JavaScript Output 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
JavaScript Output 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
JavaScript Output -Print to 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.