How to Output a JavaScript Variable in an Anchor
Web browsers interpret Web pages that are written in HyperText Markup Language, and, when used in conjunction with CSS and JavaScript, HTML is the standard language used to create pages on the World Wide Web. The term "HyperText" refers to text that contains links or "anchors" to other web pages and is, therefore, not constrained to a linear format. JavaScript is a scripting language that lets Web developers create scripts that can be used for a wide variety of purposes and output code results -- such as variables -- in anchor tags.
Other People Are Reading
Instructions
-
-
1
Open a text editor and create a new file named jsAnchor.html. Add some HTML tags to the file that include an open "<html>" tag, an open "<head>" tag, a close "</head>" tag, an open "<body>" tag, a close "</body>" tag, and a close "</html>" tag. Together, these tags form a rudimentary web page that can be displayed in a Web browser.
<html>
<head></head>
<body></body>
</html>
-
2
Add an open "<script>" and a close "</script>" tag between the "<body>" and "</body>" tags. Assign the "type" attribute "text/javascript" to the "<script>" tag.
<html>
<head></head>
<body>
<script type="text/javascript">
</script>
</body>
</html>
-
-
3
Declare a JavaScript variable named "anchorVar" between the "<script>" and "</script>" tags using the JavaScript "var" keyword. Assign the variable the value "http://www.usda.gov". This value is an example; the hyperlink's "href" attribute can be any website address available locally or on the Internet.
<html>
<head></head>
<body>
<script type="text/javascript">
var anchorVar = "http://www.usda.gov";
</script>
</body>
</html>
-
4
Use the JavaScript "document.write()" method to write the first part of an HTML anchor tag ("<a") and the anchor tag's "href" attribute to the HTML page. Type an equal sign ("=") immediately after the "href" attribute.
<html>
<head></head>
<body>
<script type="text/javascript">
var anchorVar = "http://www.usda.gov";
document.write("<a href=");
</script>
</body>
</html>
-
5
Use a second "document.write()" method to write the "anchorVar" variable to the HTML page. Use the JavaScript concatenation operator ("+") and a close character "(>)" to complete the anchor tag.
<html>
<head></head>
<body>
<script type="text/javascript">
var anchorVar = "http://www.usda.gov";
document.write("<a href=");
document.write(anchorVar + ">");
</script>
</body>
</html>
-
6
Use a third "document.write()" method to output the text "This link uses a variable output with JavaScript" to the HTML page.
<html>
<head></head>
<body>
<script type="text/javascript">
var anchorVar = "http://www.usda.gov";
document.write("<a href=");
document.write(anchorVar + ">");
document.write("This link uses a variable output with JavaScript");
</script>
</body>
</html>
-
7
Use a fourth "document.write()" method to write a close HTML hyperlink tag ("</a>") to the HTML page. Save and close jsAnchor.html.
<html>
<head></head>
<body>
<script type="text/javascript">
var anchorVar = "http://www.usda.gov";
document.write("<a href=");
document.write(anchorVar + ">");
document.write("This link uses a variable output with JavaScript");
document.write("</a>");
</script>
</body>
</html>
-
8
Open "jsAnchor.html" in a web browser. Click on the hyperlink and validate that the "anchorVar" JavaScript variable ("http://www.usda.gov") is output as part of the anchor tag.
-
1
Tips & Warnings
JavaScript has a function called String.link that automatically adds string text to anchors. See the references section for more information on the String.link function.
The "<a>" HTML tag can be styled using CSS attributes such as color, font, and style.
JavaScript can be used to create bookmarks inside documents. Bookmarks are internal links that allow linkage to specific information within a hypertext document.
The JavaScript escape character, or backslash, can help ensure that web browsers interpret forward slashes as intended.
References
Resources
- Photo Credit Hemera Technologies/AbleStock.com/Getty Images
