There are certain situations in which you may need to generate output from your JavaScript code. For example, you might want to see the value of variable, or write a message to browser console to help you debug an issue in your running JavaScript code, and so on.
JavaScript Display Possibilities
JavaScript can “display” data in different ways:
- Writing into an HTML element, using
innerHTML. - Writing into the HTML output using
document.write(). - Writing into an alert box, using
window.alert(). - Writing into the browser console, using
console.log().
Using innerHTML
To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML content:
Example: This example uses innerHTML to display the data.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title> JavaScript Output using innerHTML </title> </head> <body> <h1>MYWEBCODE</h1> <h2> JavaScript Display Possibilities Using innerHTML </h2> <p id="MWC"></p> <!-- Script to uses innerHTML --> <script> document.getElementById("MWC").innerHTML = 14 * 3; </script> </body> </html> |
Output:
Using document.write()
For testing purposes, it is convenient to use document.write():
Example: This example uses document.write() property to display data.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title> JavaScript Output using document.write() </title> </head> <body> <h1>MYWEBCODE</h1> <h2> JavaScript Display Possibilities Using document.write() </h2> <!-- Script to uses document.write() --> <script> document.write(15 * 2); </script> </body> </html> |
Output:
If you use the document.write() method method after the page has been loaded, it will overwrite all the existing content in that document. Check out the following example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title> JavaScript Output using document.write() </title> </head> <body> <h1>MYWEBCODE</h1> <h2> Using document.write() after an HTML document is loaded, will delete all existing HTML: </h2> <button type="button" onclick="document.write(5 * 6)">Click Me</button> </body> </html> |
Using window.alert()
It displays the content using an alert box.
Syntax:
|
1 |
window.alert() |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title> JavaScript Output using window.alert() </title> </head> <body> <h1>MYWEBCODE</h1> <h2> JavaScript Display Possibilities Using window.alert() </h2> <!-- Script to use window.alert() --> <script> window.alert(15 * 2); </script> </body> </html> |
Output:
Using console.log()
For debugging purposes, you can call the console.log() method in the browser to display data.
Example: This example uses console.log() property to display data.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title> JavaScript Output Using browser console </title> </head> <body> <h1>MYWEBCODE</h1> <h2> JavaScript Display Possibilities Using console.log() </h2> <!-- Script to use console.log() --> <script> console.log(15*2); </script> </body> </html> |
Output:
