JavaScript variables are the most essential part of your HTML code. Therefore, you should know how to use a JavaScript variable in HTML if you are a programmer and work with JS and HTML often. This guide will discuss the best five ways to help you do so.
The best five ways are:
- Using innerHTML or textContent
- Using Template Literals
- Using Event Listeners
- Using document.write() Method
- Using window.alert() Method
We will discuss the above methods in detail and explain them using examples. Additionally, we will discuss how to link these JS variables to HTML elements easily. Furthermore, JS is a very famous programming language that does many things. For instance, you can learn how to create a calendar in HTML using JavaScript or convert a string to HTML in React(a JS library). Moving on, let’s discuss the above methods without wasting any time.
Table of Contents
How to Use a JavaScript Variable in HTML: Top 5 Ways
In this section, we will discuss the best five methods on how to use a JavaScript variable in HTML in detail. Without further ado, let’s get started.
Using innerHTML or textContent
The first method to access JavaScript variables in HTML is to use the innerHTML or textContent method. It is one of the easiest methods you can use without difficulties. In this method, the innerHTML or textContent.innerHTML helps you display HTML code, whereas textContent helps when we have plain text. Let’s understand via an example. For instance, look at the following code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>How to display a JavaScript Variable in HTML</title>
</head>
<body>
<h1 id=”example”>Hello, Strobecorp!</h1>
<script>
let name = “Everyone”;
document.getElementById(“example”).innerHTML = “Hello, ” + name + “!”;
</script>
</body>
</html>
In the above example, we have selected the <h1> element with the help of document.getElementById with id= “example”. Afterward, we altered its content with the help of .innerHTML. When you run this code, the output will be: Hello, Everyone!
Using Template Literals
The second method for showing JavaScript variables in HTML is to use Template Literals. This is a contemporary way to embed variables in strings, and it makes the code easy to read and understand. To incorporate this method, encircle the string in backticks( ) and fill in the variables with the help of ${}. Let’s discuss the previous example, but we will use template literals now. Look at the following code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>How to display a JavaScript Variable in HTML</title>
</head>
<body>
<h1 id=”example”>Hello, Strobecorp!</h1>
<script>
let name = “Everyone”;
document.getElementById(“example”).innerHTML = `Hello, ${name}!`;
</script>
</body>
</html>
Using Event Listeners
The third method to print JavaScript variables in HTML is to incorporate Event listeners in your code. Event listeners wait for a particular event, such as a button click, and then run a function to alter the HTML content. You can use this method to change the content through user interaction. Let’s discuss the previous example, but we will use event listener now. Look at the following code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>How to display a JavaScript Variable in HTML</title>
</head>
<body>
<h1 id=”example”>Hello, Strobecorp!</h1>
<button id=”updateButton”>Change Text</button>
<script>
let name = “Everyone”;
const changeText = () => {
document.getElementById(“example”).innerHTML = `Hello, ${name}!`;
}
document.getElementById(“updateButton”).addEventListener(“click”, changeText);
</script>
</body>
</html>
When you run the above code, you will see a button. The heading will only be changed after you click on the button.
Using document.write() Method
The fourth method for using JavaScript variables in HTML is to use document.write(). This method is proper when showing JS variables inside an HTML web page. It is preferred when you want to test your JS code. Let’s understand via an example. For instance, look at the following code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>How to display a JavaScript Variable in HTML</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Hello Everyone</p>
<!– JavaScript Code –>
<script>
var x = “This is Strobecorp”;
document.write(x);
</script>
</body>
</html>
In the above code, we have made a variable x and set the value “This is Strobecorp”. When you run this code, you will see the value shown right into the HTML webpage after the heading and paragraph elements.
Using window.alert() Method
The last method we will discuss is window.alert(). When you use this method, it will show the JS variables in a pop-up alert box shown on the webpage. Let’s understand via an example. For instance, look at the following code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>How to display a JavaScript Variable in HTML</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Hello Everyone</p>
<!– JavaScript Code –>
<script>
var x = “This is Strobecorp”;
window.alert(x);
</script>
</body>
</html>
When you run the above code, you will see a pop-up alert box with the text “This is Strobecorp.”
See Also: How To Connect HTML To MySQL: Integrating Web And Database
How to link JavaScript Variables to HTML Elements?
This section will discuss how to use a JavaScript variable in HTML. To do so, follow these steps:
- Make an element in HTML. For instance:
<p>Content …</p>
- Provide an ID. For instance:
<p id=”example”>Content …</p>
- Now, use the <script> tag to add JS to your page.
- Inside the <script> tag, make a JS variable. For instance:
var updateContent = “This content will be shown as a paragraph when we insert it through Javascript.”;
- Now, you have the get element in JS with the mentioned Id value. For instance:
var container = document.getElementById(‘example’);
- You have to use the innerHTML property to show the code. For instance:
container.innerHTML = updateContent;
Following the above steps, you can easily link JS variables to HTML elements. The full code:
<body>
<p id=”example”>Content …</p
<!– JavaScript Code –>
<script>
var updateContent = “This content will be shown as a paragraph when we insert it through JavaScript.”;
var container = document.getElementById(‘example’);
container.innerHTML = updateContent;
</script>
</body>
FAQs
How to access external JavaScript variables in HTML?
In JS, you can utilize the 'script' tag to access external JS variables in HTML.
How do you reference a variable in HTML?
You can use the 'var' tag to reference a variable in HTML.
Which method is used to access HTML elements using JavaScript?
To access HTML elements using JS, you can use the getElementById method.
How do you add JavaScript variables to CSS?
You must use the getComputedStyle() method to add JS variables in CSS.
Conclusion
In conclusion, we learned how to use a JavaScript variable in HTML. The five methods mentioned in the guide are easy to use. Specify an ID for your HTML element to link it with your JS variable. Furthermore, the event listeners and innerHTML methods are the ones the programmers prefer to use daily. Use the document.write() method if you have doubts and want to check your JS code.
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.
