How to display JavaScript variable value in HTML page

Last updated:4th Nov 2021

This tutorial will show you how to display javascript variables inside the HTML page in three different ways.

By using document.write() method
By using innerHTML property
By using window.alert() method

display variable using document.write() method

document.write() method will replace all content inside HTML body tag with output of document.write().

you can display javascript variables in this method. for example

<html>
<body>
   <script>
	    var x = 10;
	    document.write("value of x="+x);
   </script>
</body>
</html>

output will be 10

Display javascript variable using innerHTML property

you can display javascript variable value in any place of HTML file by using innerHTML property
for example

<!DOCTYPE html>
<html>
<body>
  <h3>value of javascript variable are <span id="demo"></span></h3>
   <script>
	 var a=5+10
	 document.getElementById("demo").innerHTML=a;
   </script>
</body>
</html>

Run now

value of javascript variable are 15

Display javascript variable using window.alert() method

alert() method will display value in dialog box for example

<!DOCTYPE html>
<html>
<body>
   <script>
	 var a=5+10;
	 alert(a);
   </script>
</body>
</html>

Run now