Open In App

JavaScript Output

Last Updated : 18 Apr, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

JavaScript output refers to the information, results, or content that a JS program displays for users. Output in JavaScript can be displayed in various forms, and developers often use different methods to display the output of a given code.

JavaScript Output Display Properties

There are primarily four distinct methods for displaying output in JavaScript. Although there are other methods for output display, they are not advisable, so it is recommended to refrain from using alternative output approaches.

  • innerHTML – Display the HTML output on an element.
  • Using console.log() Method – Display the content on the browser console.
  • document.write() method – Displays the content on an HTML element.
  • window.alert() Method – Display the HTML element to the output.

JavaScript innerHTML Property

The innerHTML property is used with HTML element. JavaScript can be used to select an element using the document.getElementById(id) method, and then use the innerHTML property to display the output on the specified element (selected element).

 Syntax:

document.getElementById("id").innerHTML;

Example: The document.getElementById(id) method with innerHTML property is used to display the output. 

html
<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>JavaScript Output</title>
</head>

<body>
    <h2>
        Display Output using innerHTML Property
    </h2>
    
      <p id="GFG"></p>

    <!-- Script to use innerHTML -->
    <script>
        document.getElementById("GFG").innerHTML 
              = "Hello Geeks!";
    </script>
</body>
  
</html>

Output:

JS-innerHTML-Property

JavaScript console.log() Method

The console.log() method is used for logging messages to the console. It is a debugging tool available in most web browsers. It is used during development to output information about the state of the program.

Syntax:

console.log();

Example: This example uses the console.log() property to display data. 

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <title>JavaScript Output</title>
</head>

<body>
    <h2>
        Display Output using console.log() Method
    </h2>
    
    <!-- Script to use console.log() -->
    <script>
        console.log("Hello Geeks!");
    </script>
</body>

</html>

Output:

JS-Consolelog-method

JavaScript document.write() Method

To use the document.write(), simply call this method and provide the content you want to be written to the document. This method is often used for directly adding content to the HTML document while it is being parsed.

Note: If we use document.write() after the HTML document is loaded, it will delete all existing HTML.

Syntax:

document.write();

Example: The document.write() method display the output. 

html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>JavaScript Output</title>
</head>

<body>
    <h2>
        Display Output using document.write() Method
    </h2>

    <!-- Script to uses document.write() -->
    <script>
        document.write("Hello Geeks!");
    </script>
</body>

</html>

Output:

JS-documentwrite-method

JavaScript window.alert() Method

The window.alert() method is used to display an alert box with a specified outut (or message) and an OK button.

Syntax:

window.alert();

Note: We can skip the window keyword in this method.

Example: The window.alert() method display the output data. 

html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>JavaScript Output</title>
</head>

<body>
    <h2>
        Display Output using window.alert() Method
    </h2>

    <!-- Script to use window.alert() -->
    <script>
        window.alert("Hello Geeks!");
    </script>
</body>

</html>

Output:

JS-alert-method

JavaScript window.print() Method

The window.print() method is used to open the browser’s print dialog, allowing the user to print the current page. JavaScript does not contain any default print object or methods.

Syntax:

window.print();

Example: The window.print() method prints the current page.

HTML
<!DOCTYPE html>
<html>

<body>
    <h2>JavaScript window.print() Method</h2>

    <button onclick="window.print()">
          Click here to Print
      </button>
</body>

</html>

Output:

JS-print-method

JavaScript window.prompt() Method

The window.prompt() method is used to display a dialog box that prompts the user input. It returns the text entered by the user as a string. It doesn’t display output directly but captures user input.

Note: This method is not used for output, it only use to take input from user.

Syntax:

window.prompt();

Example: The window.prompt() method to take user input and display the entered data used alert() method.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <title>JavaScript Output</title>
</head>

<body>
    <h2>
        Display prompt box for user input
    </h2>

    <script>
        let userInput = window.prompt("Please Enter your Input");

        if (userInput !== null) {
            window.alert("Hello, " + userInput + "!");
        } else {
            window.alert("You clicked Cancel or closed the prompt.");
        }
    </script>
</body>

</html>

Output:

JS-prompt-method



Previous Article
Next Article

Similar Reads

Output of JavaScript Programs
In this article, we will see the outputs of various Javascript programs. Predict and Explain the Output of the below JavaScript programs. Example 1: When (x, y, z) is logged, x gives value 4 (as primitives are passed by value, and hence its value does not change even after function f()). y is an array, hence an object, and so it is passed by refere
3 min read
JavaScript Output Based Interview Questions
JavaScript (JS) is the most widely used lightweight scripting and compiled programming language with first-class functions. It is well-known as a scripting language for web pages, mobile apps, web servers, and many more. In this article, we will cover the most asked output-based interview questions of JavaScript. Q1. C/C++ Code let x = { b: 1, c: 2
35 min read
Ways to Format Console Output in JavaScript
In web development we use the browser's console window to display messages such as errors or warnings or even personalised methods. Mostly it is used by programmers for testing and debugging process. We can modify the console output according to our convenience to create personalised messages. We will discuss some approaches to format a console out
1 min read
Output of PHP programs | Set 1 (Regular Expressions)
Predict the output of following PHP programs: Question 1 &lt;?php echo str_pad(&quot;Welcome&quot;, 5).&quot; to GeeksforGeeks.&quot;; ?&gt; Options: WelcomeWelcomeWelcomeWelcomeWelcome to GeeksforGeeks. to GeeksforGeeks. WelcomeWelcomeWelcomeWelcomeWelcome to GeeksforGeeks. Welcome Welcome to GeeksforGeeks. Output: Welcome to GeeksforGeeks. Explan
3 min read
Output of PHP programs | Set 2 ( Filters )
Predict the output of the following PHP programs: Question 1 &lt;?php $num = &quot;123&quot;; if (!filter_var($num, FILTER_VALIDATE_INT)) echo(&quot;Hello&quot;); else echo(&quot;Welcome to GeeksforGeeks&quot;); ?&gt; Options: No output is returned Hello Welcome to GeeksforGeeks Error Output: Welcome to GeeksforGeeks Explanation: filter_var() – Fil
2 min read
Output of PHP programs | Set 3
Predict the output of below PHP programs: Question 1 &lt;?php $number = array(0, 1, one, two, three, 5); $num = preg_grep(&quot;/[0-5]/&quot;, $number); print_r($num); ?&gt; Options: Array([0]=&gt;0 [1]=&gt;1 [2]=&gt;one [3]=&gt;two [4]=&gt;three [5]=&gt;5) Array([2]=&gt;one [3]=&gt;two [4]=&gt;three) Array([1]=&gt; 1) Array([0]=&gt;0 [1]=&gt;1 [5]
3 min read
PHP | Output Buffering
The PHP Language is an interpreted language, i.e. it is executed statement after statement. By default one characteristic of PHP makes it send HTML as chunks as soon as it is generated by executing the statements; this characteristic makes the loading of the webpage granular and the loading time span may appear in a haphazard manner. An Example of
2 min read
Output of PHP programs | Set 4
Predict the output of below PHP programs: Question 1 &lt;?php &quot;Welcome to GeeksforGeeks!&quot; ?&gt; Options: Error Welcome to GeeksforGeeks! Nothing Missing semicolon error Output: Nothing Explanation: If you need to output something onto the screen you’ll need to use echo or print_r. Question 2 &lt;?php print_r &quot;I am intern at GeeksforG
2 min read
HTML | &lt;output&gt; form Attribute
The HTML &lt;output&gt; form Attribute is used to specify that the &lt;output&gt; element can contain one or more forms. Syntax: &lt;output form="form_id"&gt; Attribute Values: It contains single value form_id which contains the value i.e form_id which specify the one or more than the output element belongs to. The value of this attribute should be
1 min read
HTML | DOM Output form Property
The Output form Property in HTML DOM is used for returning a reference to the form where an &lt;Output&gt; Element belongs to. It is read-only Property that returns a form object on success. Syntax: outputObject.form Note: There is no property values in HTML DOM Output form Property. Return value: A reference to &lt;form&gt; element containing the
1 min read