How to Display JavaScript Variable in HTML
If you’re looking for ways to display the javascript variable values in an HTML web page then you’re at the right place. Printing JavaScript variables in HTML is the most useful thing that you will have ever learned. You can leverage the benefits of using this technique to manipulate HTML elements.
Simply, there are three different ways to display the javascript variables in HTML. We’ll walk you through all those methods step by step in this tutorial. So, let’s begin.
Display JavaScript Variable in HTML
Following are the three ways to display the value of a variable in an HTML web page.
- Using innerHTML property
- Using JavaScript document.write() method
- And by using JavaScript window.alert() method
Let’s see them one by one in depth.
1. Use innerHTML to Display JavaScript Variable in HTML
The JavaScript innerHTML property is used to display content inside HTML elements. It also replaces the content of HTML elements. It is the most effective and easy-to-use method for displaying JavaScript variable values on an HTML web page.
To use the innerHTML property, first, you need to get the element of HTML where you want to print the JavaScript variable value. For example, if you want to print the variable value inside <p> paragraph element then you have to get the element first using JavaScript code.
For this, we use JavaScript getElementById() method. This method simply allows us to access the HTML elements by their id name.
Let’s see the complete code example.
<body><p id="demo">This is HTML</p><!-- JavaScript Code --><script> var x = "This is JavaScript"; document.getElementById('demo').innerHTML = x;</script></body>
In the above code, we created a variable with the name x and stored the string “I am JavaScript” inside the variable. Then, we access the HTML paragraph element by its id name. And finally used our innerHTML property to display JavaScript variable value in HTML.
Simple!
Note: I added the JavaScript code inside <script> tags. There is another way to add JavaScript to HTML that you can check out by clicking the link.
Now, let’s see the second method.
2. Use a document.write() method to Display JavaScript Variable in HTML
The JavaScript document.write() method directly writes inside the HTML body. This method is suitable in many situations like testing JavaScript code. When you want to display JavaScript variable values directly into an HTML web page you can use this method too.
Let’s see the code example to understand how to use it.
<body><h1>Heading 1</h1><p>This is paragraph</p><!-- JavaScript Code --><script> var y = "This is JavaScript"; document.write(y);</script></body>
In the above code, I created a variable ‘y’ and assigned the string “This is JavaScript” to it. And then I used document.write() method and give variable name as a parameter to it. The javaScript code will simply write “This is JavaScript” after the h1 and p elements.
Here, if you see the output of the above code, then you will notice that it directly writes inside the HTML body. But it is working perfectly and displays the value of the JavaScript variable ‘y’ in the HTML webpage.
However, if you use a document.write() method in a JavaScript function then it will remove all the existing HTML content after function execution.
So, this is how to use a document.write() method to display variable value. Let’s go ahead to the next method.
3. Use the window.alert() method to Display JavaScript Variable
The JavaScript window.alert() method is used to display alerts on a web page. Although, we can also use this method to print JavaScript variable values in a pop-up alert box on the HTML webpage. Let’s see how to do it.
The following code example will show a pop-up box that will display the value of variable z which is “Hi this is JavaScript”. The pop-up will appear when your webpage will load.
<body><h1>Heading 1</h1><p>This is paragraph</p><!-- JavaScript Code --><script> var z = "Hi this is JavaScript"; window.alert(z);</script></body>
The output of the above code will look like this below.
So, this is how you can display JavaScript variable values in HTML. If you have any questions in mind related to this tutorial, then leave a comment below.
Also Read about:
