Generating JavaScript Outputs-Programming tutorial

Table of Contents

JavaScript outputs

There are certain situations where you want to generate output of your program as per your requirement. Sometime, 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.

There are several ways in JavaScript to generate the output which include writing the output to the browser console, displaying output in dialog boxes and writing output to an HTML element. JavaScript can display output in following ways.

Writing output to browser console

You can write output to the browser console by using the console.log() method. This is a simple and very strong method to write output. Let us take an example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Output on console</title>
</head>
<body>
    <p>The output on console</p>
    <script>
    var x=25;
    var y=30;
    var sum;
    sum=x+y;
    console.log("The sum of x and y is",sum);
    </script>
</body>
</html>

console in javascript — programmingtutorial.in

Displaying output in Alert Dialog box

You can display output of your program with the help of alert() dialog box. An alert dialog box is created by using alert() method. Let us take an example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Output on console</title>
</head>
<body>
    <p>The output on console</p>
    <script>
    var x=25;
    var y=30;
    var sum;
    sum=x+y;
    alert(sum);
    </script>
</body>
</html>

Writing output to the browser window

You can write output of your code on window by using document.write() method. 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 lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Output on window</title>
</head>
<body>
    <p>The output on window</p>
    <script>
    var x=25;
    var y=30;
    var sum;
    sum=x+y;
    document.write("The sum of x an dy is ", sum);
    </script>
</body>
</html>

Inserting output inside HTML

You can insert output inside an HTML element by using innerHTML property. Before inserting output in an HTML you need to select an element by using getElementById() method.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Output on window</title>
</head>
<body>
    <p id="elem1">Value inserted is</p>
    <p id="elem2"> </p>
    <script>
    var x=25;
    var y=30;
    var sum;
    sum=x+y;
    document.getElementById("elem2").innerHTML=sum;
    </script>
</body>
</html>

The result is

The value inserted is