JavaScript is often used in HTML pages to add interactivity and dynamic behavior. Using JavaScript variables in HTML, you can store and manipulate data that can be used to update the page’s contents without reloading the entire page.
This allows for a more user-friendly and responsive experience for the user. The values of the JavaScript variables can also be used to control the behavior of other HTML elements, such as showing or hiding certain parts of the page based on user input.
This article will discuss “How To Display JavaScript Variable Value In Html Page.” Please continue with us. We will explain step by step. Let’s start
There are several ways to display JavaScript variable values in HTML pages, including:
- Using the document.write() method
- Using innerHTML property
- Using console.log() method
- Creating and modifying HTML elements with JavaScript dynamically.
Take JavaScript assignment help or HTML assignment help to learn more about this topic
How To Display JavaScript Variable Value In Html Page
Table of Contents
Using the document.write() method
The document.write() method is a method in JavaScript that writes a string of text to a document. It can be used to write HTML content after the page has loaded. However, it is considered to be an outdated method. It should be avoided in modern web development because it can overwrite the page’s entire content and block other scripts from executing until the write method has been completed. Instead, modern web developers prefer more efficient and flexible methods such as innerHTML, appendChild(), or template literals.
Example of document.write() method
Program
<html>
<head>
<title>
codeavail
</title>
<script>
document.write("Hello world");
</script>
</head>
<body>
<h1> About us</h1>
<p>CodeAvail is an online community of Computer Science Experts from esteemed colleges that provide online code help in various computer science languages. </p>
</body>
</html>
Output
Hello world
About us
CodeAvail is an online community of Computer Science Experts from esteemed colleges that provide online code help in various computer science languages.
Snapshot for program
Output
The innerHTML property in JavaScript allows you to get or set the HTML content of an element. You can use it to dynamically update the content of an HTML page based on the value of a JavaScript variable.
var text = “This is the new content.”;
document.getElementById(“example”).innerHTML = text;
This will replace the div element’s original content with the text variable’s value. You can also use the innerHTML property to extract the HTML content of an element and assign it to a JavaScript variable.
For example:
<!DOCTYPE html>
<html>
<body>
<script>
function getElement()
{
var text = "This is the new content.";
var content = "Welcome to reading this web content.";
document.getElementById("example").innerHTML = text;
document.getElementById("p1").innerHTML = content;
}
</script>
<p id="p1" onclick="getElement()">content</p>
<p id="example" onclick="getElement()">text</p>
</body>
</html>
Output
content
text
After clicking on the text Output is
Welcome to reading this web content.
This is the new content.
Snapshot for the program
Output before clicking on the text
After clicking on the text Output is
Also read: How To Call A Function In JavaScript
Using console.log() method
console.log() is a method in JavaScript that is used for logging information to the JavaScript console. The JavaScript console is a tool built into most modern web browsers, including Google Chrome, Mozilla Firefox, and Microsoft Edge. This tool can be used to debug JavaScript code and inspect the values of variables in real time.
To log a value to the JavaScript console, you can use the console.log() method and pass the variable you want to inspect as an argument. For example, if you have a variable named myVariable and you want to log its value to the console, you would write the following code:
Program
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
</title>
</head>
<body>
<p id="Demo"> An apple a day keeps the doctor away. </p>
<script type="text/javascript">
var a=100;
console.log(a);
</script>
</body>
</html>
Output
An apple a day keeps the doctor away.
Snapshot for program
Output
When this code is executed, the value of myVariable will be displayed in the JavaScript console, along with any other log messages written to the console. This makes it easy to inspect the value of variables and debug your code.
It is important to note that console.log() statements will only be executed when the JavaScript code runs in a web browser with a JavaScript console. You may encounter an error if you try to run this code in an environment that does not have a JavaScript console, such as a server-side JavaScript environment.
To see the JavaScript console in your web browser, you can usually right-click on the web page and select “Inspect Element” or “Developer Tools.” From there, you can open the JavaScript console and see any log messages written to the console.
Creating and modifying HTML elements with JavaScript dynamically.
JavaScript can dynamically create and modify HTML elements through the Document Object Model (DOM). The DOM represents a web page as a tree-like structure, with each HTML element as a node in the tree.
To create a new element, use the following syntax:
Syntax
let newElement = document.createElement(“tagName”);
where “tagName” is the HTML tag for the element you want to create (e.g. “div”, “p”, “h1”). To modify an existing element, use methods such as element.innerHTML, element.setAttribute, or element.style.property, or you can use the Node methods such as appendChild and insertBefore to add or remove elements from the DOM tree.
Example:
Program
<!DOCTYPE html>
<html>
<head>
<script>
function showCommnetForm()
{
var data = "Name :<input type='text' name= 'name'><br>Comment:<br><textarea rows='5' cols='80'></textarea><br><br><input type='submit value='post comment'>";
document.getElementById("mylocation").innerHTML = data;
}
</script>
</head>
<body>
<form name="myform">
<input type ="button"value="Comment" onclick="showCommnetForm()">
<div id = "mylocation"></div>
</form>
</body>
</html>
Snapshot for the program
Output before clicking on the Comment button
Output After clicking on the Comment button
Conclusion
In this article, we have discussed “How to Display JavaScript Variable Value in Html Page.” With this article’s help, you can better understand the role of JavaScript variable values in HTML pages. It is very helpful in your website creation.