In this tutorial we will show you the solution of how to display JavaScript variable value in HTML page, it is the most basic or say most important article, if we want to continue further with JavaScript.
In any language, it is mandatory also for the beginner that he must knew how to print output, text or any other which he want. So, in this article let us understand how to done this.
Step By Step Guide On How To Display JavaScript Variable Value In HTML Page :-
As, there are many ways with help of which we are able to display variable value.
In this article, we will show you two main method which are mostly used and easy to learn to print JavaScript value. Let us understand this with
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home page</title>
</head>
<body>
<h1 style=”color:green”> Talker’s code </h1>
<p> display JavaScript variable value in html page </p>
<p id="demo">
</p>
<script>
document.getElementById("demo").innerHTML = 10 + 10;
document.write(5 * 6);
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
- Here, in this article as we see that inside body we create one heading and two paragraphs. The last paragraph with id demo is for our JavaScript use. We will use it later to print or display variable or say output.
- Now, after that our JavaScript started. As we know that JavaScript is written under script tag and script tag is a paired tag.
- It means that it must have a closing tag. So, our JavaScript is always written under or between these tags.
- Here inside script, the first way is to use html tags to print output. Here, we use our paragraph tag with help of id and change its inner html using inner html and assigns value 10 + 10to this. It will add them and show 20 as output.
- Now, in next case we did not use any html tag to print or say show output. We just use document.write() function, which is inbuilt function to print or display output. Inside this function we directly give value to display output.
- One thing to say here that we can store these values in a variable and print that variable also. It’s an assignment for you and you must have to try it own.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to understand how to display JavaScript variable value in html page.
I hope this tutorial on how to display JavaScript variable value in html page helps you and the steps and method mentioned above are easy to follow and implement.
