Chapter 4- How to Generate Output in JavaScript

Output in JavaScript
Output in JavaScript

How to Generate Output in JavaScript

Generating output in JavaScript can be in many different ways. For example, you might want to output the value of variable, or write a message to browser console to help you in debugging the JavaScript code, taking the output via dialog boxes, sending output into an HTML element, etc.

My personal recommendation to read this article completely – How to generate output in JavaScript:

Output in JavaScript can be in the following 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().

Writing Output to Browser Console

You can easily output a message or writes data to the browser console using the console.log() method. This method is very simple yet very powerful method for generating detailed output. Here’s an example:

<!DOCTYPE html>
<html>
<body>
console.log("Hello India!");
var x = 10;
var y = 20;
var sum = x + y;
console.log(sum);
</body>
</html>

NOTE: To access your web browser’s console, first press the F12 key on the keyboard to open the developer tools then click on the console tab.

Displaying Output in Alert Dialog Boxes

JavaScript output data can also be displayed via alert dialog boxes . An alert dialog box is created using the alert() method. In JavaScript, the window object is the global scope object, which means that variables, properties, and methods by default belong to the window object. But  specifying the window keyword is optional:

Example:

<!DOCTYPE html>
<html>
<body>
window.alert("Hello India!");
var x = 10;
var y = 15;
var sum = x + y;
alert(sum);
</body>
</html>

Writing Output to the Browser Window

You can use the document.write() method to write the content to the current document only while that document is being parsed

Example:

<!DOCTYPE html>
<html>
<body>
document.write("Hello India!");
var x = 10;
var y = 20;
var sum = x + y;
document.write(sum);
</body>
</html>

If you use the document.write() method after the page has been loaded, it will overwrite all the existing content in that document. Check out the following example:

<!DOCTYPE html>
<html>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
<button type="button" onclick="document.write('Hello India!')">Click Me</button>
</body>
</html>

innerHTML –Inserting Output Inside an HTML Element

Understanding innerHTML First

The innerHTML property comes under  the Document Object Model (DOM) which allows JavaScript code to manipulate a that how a  website should be displayed. It is used to read and replace everything within a given DOM element . The innerHTML property writes the dynamic HTML on the HTML document.

The innerHTML can load a specific page content without refreshing the whole page. This reduces  the data usages and the time to load a page. This gives  a much fast and responsive feel and hence making the user experience much better.

innerHTML is used  in the web pages to generate dynamic HTML such as registration form, comment form, links, etc.

The element’s innerHTML property is used to  write or insert output inside an HTML element. Before writing the output, we need to select the element using a method  getElementById(), as shown below :

<!DOCTYPE html>
<html>
<body>
<p id="greet"></p>
<p id="result"></p>
<script>
// Writing text string inside an element
document.getElementById("greet").innerHTML = "Hello India!";
 // Writing a variable value inside an element
var x = 10;
var y = 20;
var sum = x + y;
document.getElementById("result").innerHTML = sum;
</script>
</body>
</html>

The innerHTML summary:

  • The  innerHTML property of an element is used to get or set the values of HTML contained within the element.
  • The innerHTML property returns the current HTML source of the element, including any change that has been made since the page was loaded.
  • Avoid using innerHTML to set new content that you don’t  have control to avoid a security risk.

To Print the contents to Printers using JavaScript Print

JavaScript does not have any print object or print methods to get the code printed on the printer.

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 browser window to the printer. JavaScript print is the only method in JavaScript to get JavaScript print on the printers.

<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>

If you like my tutorial about how to generate output in JavaScript, please share your feedback and suggestions in below comment box

 To visit the  Official website of JavaScript Click here

You May Also Like: Let us Learn JavaScript Step by Step ,            Where to write JavaScript Code

5 1 vote
Article Rating
Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback
1 year ago

[…] Similar Topics:  How To Enable JavaScript in Browsers,   How to Generate Output in JavaScript […]

trackback
1 year ago

[…]                            Where to write JavaScript Code ,         How to Generate Output in JavaScript […]

trackback
1 year ago

[…] How to Generate Output in JavaScript […]

trackback
1 year ago

[…] Similar Topics:  How To Enable JavaScript in Browsers,   How to Generate Output in JavaScript […]

trackback
1 year ago

[…]                            Where to write JavaScript Code ,         How to Generate Output in JavaScript […]

trackback
11 months ago

[…] How to Generate Output in JavaScript               Multiple GST and Interstate Sales invoice       What is New in HTML5 […]

Please Subscribe to Stay Connected

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

DigitalSanjiv will use the information you provide on this form to be in touch with you and to provide updates and marketing.
Share via
Copy link
Powered by Social Snap
%d bloggers like this: