JAVASCRIPT - INPUT & OUTPUT

Input and Output are preferably the most important statements in a programming language.

So far, we have seen the Output command of JavaScript(i.e. document.write(...)).

Example :

	<html>
	<body>
	<script language = "javascript" type = "text/javascript">
	 
		document.write("Hello world")
	
	</script>      
	</body>
	</html>

And we are yet to look at the Input statement.

JavaScript Input

So far, we have used variables to store values. But the variables were loaded with values.

Example :

	<html>
	<body>
	<script language = "javascript" type = "text/javascript">
	
		var x = 9
		document.write("The value of x is : ",x)

	</script>      
	</body>
	</html>

Output :

The value of x is : 9

But, what if you don't want the variable x to contain a fixed value like 9. Rather you want the user to enter any value of their choice.

And this is where the Input statements comes to picture.

Just like the Output statement is called document.write(). Same way the Input statement is called as prompt().

Let us understand prompt() method with the below example.

Example :

var x = prompt("Enter any number of your choice :")
document.write("The number is : ",x)

Output :

Enter any number of your choice : 5
The number is : 5

Now, if you see the Output. The first line says,

Enter any number of your choice : 5

So, what happened is, a small window opens with the below message,

Enter any number of your choice :

The window has two button ok and cancel.

The window will wait for you to type a number.

In the above case, I have typed 5.

And we got the output,

The number is :  5

Next, let us look at JavaScript Output.

JavaScript Output using document.write()

A simple example of document.write(...) statement would be,

Example :

<html>
<body>
<script language = "javascript" type = "text/javascript">
	
	x = 5
	document.write("The value of x is : ",x)

</script>      
</body>
</html>

Output :

The value of x is : 5

There is another way using which we can print the output. Let us look at it.

JavaScript Output using document.getElementById().innerHTML

This is the most important way to print the output and is used quite often.

Let us see in the below example.

Example :

<html>
<body>

	<h3>My first JavaScript Program</h3>
	<p id="myId"></p>

<script>

	var x = 5
    var y = 6
    var z = x + y
	document.getElementById("myId").innerHTML = z
    
</script>      

</body>
</html>

Output :

My first JavaScript Program
11

So, in the above code we have given the heading with <h3> tags.

<h3>My first JavaScript Program</h3>

Then we have created a paragraph with <p> tag with the id name myId.

<p id="myId"></p>

Now, just remember, the id name myId is the one that matters the most to us. Let us see how?

And in the next line, we have our JavaScript code between the <script> tag.

<script>
	var x = 5
	var y = 6
	var z = x + y
	document.getElementById("myId").innerHTML = z
</script>

Just like the above examples, we have declared the variables x and y and added them. And the added result is stored in z.

var x = 5
var y = 6
var z = x + y

Then comes the most important line,

document.getElementById("myId").innerHTML = z

All we have done is, used document.getElementById(...) to get the id of the paragraph, that we have declared using paragraph tag i.e. myId.

<p id="myId"></p>

And document.getElementById("myId") gets the id i.e. myId followed by innerHTML.

document.getElementById("myId").innerHTML

And change the content of the paragraph using the added value in the variable z.

document.getElementById("myId").innerHTML = z

Now, if you see the output, you can see the paragraph,

<p id="myId"></p>

Is substituted with the value 11.

So, to say in short, just get the id i.e. myId using,

document.getElementById("myId").innerHTML

and substitute it with your desired value.

document.getElementById("myId").innerHTML = z

❮❮ PREV NEXT ❯❯