Study Smart, Not Hard. - StudyMuch

JavaScript Output Display

Published by StudyMuch on

JavaScript StudyMuch.in

JavaScript Output Display

In this tutorial you will learn how to display JavaScript output, different method of coding to display output in JavaScript. Output display that means how to display programming output, many methods to display output in JavaScript, you learn in this tutorial all the method of JavaScript Output Display with programming examples.

JavaScript Displaying Output

Displaying and generating output in JavaScript program is very important especially when learning the JavaScript language.

For example, if you want to see your JavaScript statement or code blocks are correct, you can output the program and check it.

JavaScript Output Display

In JavaScript there are Four ways to display output; –

  • Using Console
  • Using Dialog Box
  • Writing to HTML Elements
  • Writing to the Browser Window

Now we define all the method of “JavaScript Output Display” below one by one with programming examples, that you can understand better.

Using console

By using this console console.log() function we can write JavaScript program into the browser’s developer console. It is run only on the desktop because it is browser developer console.

Programming Examples of Using Console Output; –

<!DOCTYPE html>
<html>
    <head>
        <title>Console Display</title>
    </head>
    <body>
       <script>
        var a = 10;
        var b = 15;
        var sum = a + b;
        console.log(sum);
       </script>
    </body>
</html>

You can see above console.log program. However, the output of console.log() cannot be seen on mobile devices because the developer console is only available on desktop devices browser like Firefox, Microsoft Edge and Firefox.

Using Dialog Box

In Dialog Box, we display output by using alert() function, we can output data on a dialog box, and it is work both mobile and desktop, Look below programming example.

Programming example using Dialog Box; –

<!DOCTYPE html>
<html>
    <head>
        <title>Dialog Box</title>
    </head>
    <body>
<button type="button" onclick="myfunc()">
Display Dialog Box</button>
       <script>
        function myfunc(){
        var a = 10;
        var b = 15;
        var sum = a + b;
        console.log(sum);
       alert(sum)}
       </script>
    </body>
</html>

If you run above programming example, then you can see a dialog box like given below;

This is the output of the above programming examples, print output using Dialog box.

Writing to HTML Elements

By using this Writing HTML Elements, innerHTML property, we can change the content or text of the selected elements.

We can use the document.getElementById() function to select an elements. Look below programming example to understand better.

Programming example of Inner HTML; –

<!DOCTYPE html>
<html>
    <head>
        <title>Inner HTML</title>
    </head>
    <body>
        <p id="study"></p>
   <button type="button" 
   onclick="myfunc()">StudyMuch</button>
       <script>
        function myfunc(){
        var a = 10;
        var b = 15;
        var sum = a + b;
        document.getElementById("study")
       .innerHTML = sum;}
       </script>
    </body>
</html>

You can see the above programming of Inner HTML coding, in output of this program if you click the button the sum of number is show over the button, like below output image.

This is the output of above programming examples; –

 

Writing to the Browser Window

By using the document.write() function to display the output. We can write to the content of the document. Now see the programming examples below to better understanding.

Programming examples of Displaying Browser Window; –

<!DOCTYPE html>
<html>
    <head>
        <title>Browser window</title>
    </head>
    <body>
     <p id="study"></p>
 <button type="button" 
 onclick="myfunc()">StudyMuch</button>
       <script>
        function myfunc(){
        var a = 10;
        var b = 15;
        var sum = a + b;
         document.write(sum);}
       </script>
    </body>
</html>

You can see above programming, in output of this program if you click the button when the sum of number (25) is print in the place of button. You can see below the output image.

So, in this tutorial you read all the four ways to display output in JavaScript with programming examples. I hope you read this tutorial well and learn new something, if you have doubt and confusion about this tutorial then you can comment your doubt in the comment section, we will try to reply soon.

Read Also –

Categories: JavaScript
Tags:

4 Comments

graliontorile · August 18, 2022 at 5:58 pm

What¦s Going down i’m new to this, I stumbled upon this I’ve discovered It absolutely useful and it has helped me out loads. I hope to give a contribution & assist other users like its helped me. Great job.

Reply

465 · December 12, 2022 at 7:23 pm

Woah! I’m really digging the template/theme of this blog.

It’s simple, yett effective. A lot of times it’s vry ard to get thwt “perfect balance” between suuperb
usabklity and appearance. I must say yyou have dlne a vvery gpod joob with
this. In addition, the blog lolads extremelyy fqst
for me onn Safari.Outstannding Blog!

Reply

zoritoler imol · January 3, 2023 at 1:31 pm

You have brought up a very wonderful details , appreciate it for the post.

Reply

Brian Reitler · January 16, 2023 at 9:28 am

Utterly composed content, thanks for selective information. “Life is God’s novel. Let him write it.” by Isaac Bashevis Singer.

Reply

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

Related Posts

Backend Developer Interview Questions Answers

Backend Developer Interview Question Answer

Backend Developer Interview Question Answer In this blog post, we will discuss Backend Developer Interview Questions Answers based in 2023 based, here we have provided you top 30 questions and answers related to Backend Development Read more…

Payment Method HTML Code

Payment Method HTML Code In this article you will learn and get code to create how to design a payment method page with HTML, CSS and JavaScript. That page provided a platform for payment with Read more…

JavaScript String studymuch.in

JavaScript String

JavaScript String In this article we will learn about the JavaScript String, how to create string, Single or Double quotes in string, concatenating String and Concatenation Contextual with programming examples. So, let’s start the learning. Read more…