How to display Output in Javascript - Javascript Output



How to display Output in Javascript - Javascript Output

  • 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.

Sample Code

inner-html-javascript
<!DOCTYPE html>
<html>

<body>
 <h1>My first Web Page</h1>
 <p>My first Paragraph</p>
 <p id="demo"></p>
 <script>
  document.getElementById("demo").innerHTML = 5 + 6;

 </script>
</body>

</html>

Output

inner-html-javascript

Using document.write()

  • For testing purposes, it is convenient to use document.write().

Sample Code

document-write
<!DOCTYPE html>
<html>

<body>
 <h1>My First Web Page</h1>
 <p>My first paragraph.</p>
 <p>Never call document.write after the document has finished loading. It will overwrite the whole document</p>
 <script>
  document.write(5 + 6);

 </script>
</body>

</html>

Output

doucment-write-code-output

Using window.alert()

  • You can use an alert box to display data.

Sample Code

window.alert
<!DOCTYPE html>
<html>

<body>
 <h2>My First Web Page</h2>
 <p>My first paragraph.</p>
 <script>
  window.alert(5 + 6);

 </script>
</body>

</html>

Output

window-alert-code-output

Using console.log()

  • For debugging purposes, you can call the console.log() method in the browser to display data.

Sample Code

window.alert
<!DOCTYPE html>
<html>

<body>
 <script>
  console.log(5 + 6);

 </script>
</body>

</html>

Output

console-log-code-output

JavaScript Print

  • JavaScript does not have any print object or print methods.
  • You cannot access output devices from JavaScript.
  • The only exception is that you can call the window.print() method in the browser to print the content of the current window.

Sample Code

window-print
<!DOCTYPE html>
<html>

<body>

 <button onclick="window.print()">Print this page</button>

</body>

</html>

Output

print-code-output

Related Searches to How to display Output in Javascript - Javascript Output