JavaScript and HTML are two core technologies that web developers have widely used. With the help of these two powerful tools working hand in hand, you can create dynamic websites.
There is a need to find the various ways in which Javascript and HTML can be linked, which will aid in the web development process.
In this article, you will learn how to display Javascript variable values in HTML using three methods available with some easy-to-digest examples.
What Is A Javascript Variable Value and What Does It Do?
In Java programming, a Javascript variable is a symbolic representation or an identifier of a value.
This value is subject to change during program execution, and variables play the role of data manipulation and storage as the program runs.
A variable may not necessarily represent a number alone but can mean any of the following:
- Strings
Example:
var name = “Zoe”;
- Numbers
Example:
var age = 24;
- Booleans
Example:
var successful = True;
- Arrays
Example:
var numbers = [2, 7, 9, 8, 6, 3, 1];
- Objects
Example:
var Animal = { name = “Hound” , age = 5 };
Variable values in a Javascript program can be used in myriads of ways, such as operation performance on variables. They can be used for conditional statements and passed for arguments to what are known as functions.
Variable values are not limited to the abovementioned operations but can be used in many more operations. Overall, they lighten the load of working with a lot of information in a program as they are used to manipulate, retrieve, and house data.
Methods
To display the javascript variable value in the html page, 3 methods: InnerHTML Property, Javascript document write() method, and Javascript window.alert() method can be followed. You can choose the one most suitable to you according to your comfort level with each method.
InnerHTML Property
The ‘innerHTML’ property is a property that gives you the ability to set or retrieve HTML content in an element. It gives you the power to manipulate the HTML content in an element dynamically.
Step 1: First and foremost, you have to create an HTML file like so:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=“UTF-8“>
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0“>
<title>Display Variable Value</title>
</head>
</body>
<P id=”output”></p>
<! — Your JavaScript code comes here →
<script src=”your-script.js”></script>
</body>
</html>
Step 2: After you’ve created your HTML FILE, make your JavaScript file (e.g.: ‘your–script.js’ ) and be sure to link it in the HTML document or file you previously made.
Step 3: Declare a variable In your JavaScript file using the ‘innerHTML’ property to place the content of an HTML element like so:
// your – script.js
// Declare a variable and assign a value
var myVariable =“Hie, Morning!”;
// Access the HTML element by its ID and update its content
document.getElementById (“output”).innerHTML = myVariable;
In our chosen example above, the “getElementById” is used as a method to get a reference to the HTML with the ID (“output”) as shown. If you observe, the ‘inner HTML’ property places its content to the variable ‘myVariable’ value.
When you open your chosen browser and open your HTML file in that browser, the JavaScript variable within the particular HTML element should be displayed. In our case, it’s ‘<p>’.
Javascript document write() method
This method is a straightforward approach when tackling the problem that brought you here: how to display Javascript variable value in HTML. This method dynamically generates content and adds to the HTML document while parsing.
However, there is a limitation to this approach. For modern web development, this technique potentially exhibits issues with code execution time and reparability. Unfortunately, there’s always a setback to a greater extent with the path of least resistance.
In the following example, the JavaScript in the ‘<script>’ tags utilizes ‘document.write()’ to place and ‘<h1>’ to the HTML document body. Ultimately, when the browser stumbles upon this script, it will directly write the desired or specified content into the document, thus making it fun and easy to use.
Since this looks simple and without connotations, it’s crucial to note that if you use the ‘document.write()’ after the document has completed loading, it will be overwritten.
This will inevitably lead to unexpected and certainly unwanted behaviors, especially in an intricate or complex web application.
<!DOCTYPE html>
<html>
<head>
<title>A Document Write Example For You</title>
</head>
<body>
<script>
document.write(“<h1>Hie, Morning!</h1>”);
</script>
</body>
</html>
Now, don’t lose heart, for another angle of attack can be used to utilise this method. You can play around or manipulate the Document Object Model or the DOM. You can make use of techniques like ‘getElementById’ , ‘createElement’, and, ‘appendChild’.
This approach will give you a better grip on the document structure and experience fewer issues than the first approach. The following example is set to provide a rough idea of how to get you up and running should you choose this route:
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation Example</title>
</head>
<body>
<script>
// Create a new heading element
var heading = document.createElement(“h1”);
// Create a text node with the content
var textNode = document.createTextNode(“Hie, Morning!”);
// Append the text node to the heading element
heading.appendChild(textNode);
// Append the heading element to the document
document.body.appendChild(heading);
</script>
</body>
</html>
See Also: How to Connect HTML Form to MySQL Database Using PHP
Javascript window.alert() method
Third and last is displaying Javascript variable value in HTML, the ‘wind. alert()’ comes into play. This method is used to express a simple alert message and an OK button.
It’s usually used to give users confirmation messages or some information.
Let’s delve into a simple HTML example to get a feel of what this technique is like:
!DOCTYPE html>
<html>
<head>
<title>Alert Example</title>
</head>
<body>
<script>
window.alert(“Welcome to my crib!”);
</script>
</body>
</html>
Like the second method covered in this article, this approach is simple and quick but has a few drawbacks. Unfortunately, it is noteworthy that it is unsuitable for all situations possible and can be pretty disruptive.
See Also: How to Create a Banner in HTML?
FAQs
How to display input in Javascript?
In Javascript, to attain user input capture and display, you can make use of form elements, or you can opt for HTML elements such as textboxes written like so: (‘<input type = ‘text’>’)
How do you assign a JavaScript variable to a value in HTML?
The common route would be to use JavaScript to alter or manipulate HTML documents to get an HTML value linked to a JavaScript variable. One channel is to use the ‘innerHTML’ property to set its details according to the value found in the JavaScript variable.
How to display JavaScript in text?
Tags such as ‘<code>’ or ‘<pre>’ can display plain text instead of JavaScript code in an HTML document. The mentioned tags help preserve the formatting and display the text in a fixed-width font. Additionally, use HTML entities like ‘<’ and ‘>‘, to prevent them from being treated as HTML tags.
Where to put Javascript in HTML?
The JavaScript code can be placed in several places in an HTML document. It all depends on the set conditions and your desired actions. Exemplary places include inline script, external script, and event attributes.
Conclusion
Unlock the ways to showcase JavaScript variable values in HTML. The innerHTML method shines, free from restrictions for seamless web development. Master how to display Javascript variable values in HTML with ease.
See Also: How to Convert PSD into HTML: Full Tutorial
Hi, I’m Geoff. I design. I develop. I do lots of things in between. What that really boils down to is that I make websites.