JavaScript Output

admin admin Jul 17, 2020 1475 2

JavaScript Output

JavaScript Output:

How to display JavaScript
JavaScript can display information in different ways:

yes window.alert () via the alert box using
yes document.write () Write to HTML document using
yes .innerHTML Write to HTML element using
yes console.log () can be shown in the browser console using


Use window.alert ()
You can use the alert box to display information

Example:

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="utf-8">
  4.     <title>This is JavaScript Example !</title>
  5.   </head>
  6.   <body>
  7.     <h1>My first web page..</h1>
  8.     <script>
  9.        window.alert ("Welcome");
  10.     </script>
  11.   </body>
  12. </html>

 

Output:

 

Use document.write ():

It is convenient to use document.write () for testing purposes
 

Example:

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="utf-8">
  4.     <title>This is JavaScript Example !</title>
  5.   </head>
  6.   <body>
  7.     <h1>My first web page..</h1>
  8.     <script>
  9.        document.write ("Welcome");
  10.     </script>
  11.   </body>
  12. </html>

 

Output:

                 

My first web page..

    Welcome  

 

 

Using document.write () after the HTML element is fully loaded deletes all previous HTML:

Example:

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="utf-8">
  4.     <title>This is JavaScript Example !</title>
  5.   </head>
  6.   <body>
  7.     <h1>My first web page..</h1>
  8.     <button onclick="document.write('Welcome')">Click Me</button>
  9.   </body>
  10. </html>

 

Output:

                 

Welcome

 

enlightenedThe document.write () method should only be used for testing.
 

Use innerHTML:

The JavaScript document.getElementById (id) method is used to access HTML elements.

The id attribute refers to the HTML element and the innerHTML property refers to the HTML content:

Example:

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="utf-8">
  4.     <title>This is JavaScript Example !</title>
  5.   </head>
  6.   <body>
  7.       <p id = "test" onclick = "myFunction ()">Please Click me to change my HTML content (innerHTML). </p>
  8.   <script>
  9.       function myFunction (){
  10.          document.getElementById ("test"). innerHTML = "Please Paragraph changed";
  11.       }
  12.   </script>
  13.   
  14.   </body>
  15. </html>

 

Output:

       

Please Click me to change my HTML content (innerHTML).

enlightenedA common method is to display data in HTML by modifying the innerHTML property of the HTML element.

 

Use console.log ():

You can use the console.log () method to display data on your browser console.

F12 activates the browser console and selects "Console" from the menu.

 

Example:

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="utf-8">
  4.     <title>This is JavaScript Example !</title>
  5.   </head>
  6.   <body>
  7.      <h1>My first web page..</h1>
  8.   <script>
  9.      console.log("Wlocome!");
  10.   </script>
  11.   </body>
  12. </html>

 

Output:

   

My first web page..

 

 

Thank You...

 

Tags: