Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript

What is window.location.hash in JavaScript?

Abdul Muizz

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Overview

The window.location.hash returns a string that contains a # along with the fragment identifier of the URL. The fragment identifier of the URL starts with a # followed by an identifier that uniquely identifies a section in an HTML document.

In this Answer, we will understand the working of the location.hash property of the window object. The following are the two main uses of this property:

  1. To return the anchor of the URL.
  2. To set the anchor of the URL in an HTML <a> .

Syntax

The syntax that follows from the two uses is the one below:


//This is used to return the anchor part of the URL.
location.hash 

//This is used to set the anchor value to some `ID` that we want the user to route to.
location.hash = anchorname 

Note: The location in the syntax above refers to the actual location of the element in the HTML document. This location can be accessed using the methods provided to us by DOM.

Parameters

anchorname: This is a string that specifies the anchor of an URL.

Return value

The window.location.hash property returns a string which is the anchor of the URL.

Example 1

The code example below illustrates the first use of the property:

Explanation

The explanation for the code that is present in the HTML file of the code widget above is as follows:

  • Line 5: In this line, we have an <a> tag with an href attribute encapsulates the <h2> tag. This href attribute is what we want to retrieve using the location.hash property.
  • Line 6: In this line, we have the <p> tag that acts as a container that will dynamically render the fragment identifier of the URL when the user clicks on the <button> present on line 8.
  • Line 7: The <button> tag listens for the onclick event and executes the function in the Javascript tab in the code example above.

The description of the code in the JavaScript tab is as follows:

  • Lines 2–4: Here, we use DOM and its property document.getElementById() to fetch respective HTML elements.
  • Lines 5–6: This is where we replace the text of the <p> tag in the HTML document using the element innerTextinnerText is used to set or return the text of an HTML element property. We've also made use of the location.hash property to assign the hash string returned by the property and render it accordingly in the <p> tag.

Note: To read more on the innerText property, please refer to this link.

Example 2

Let's look at the second use of the location.hash property and look at its working with the help of a code example:

Note: We must not include the hash (#) sign to set the anchor of the URL using this property. The code example that follows will further clarify this concept.

Explanation

The explanation for the HTML code is as follows:

  • Line 5: We use a <button> tag linked to the changeAnchor() method defined in the JavaScript tab. This method is explained later in the Answer.
  • Line 6: This line contains a <a> tag with the href attribute manipulated using the location.hash property. It is first set to the value currenthash and is changed to newhash when the onclick event is triggered.
  • Lines 8–11: This contains <div> elements that are incorporated to demonstrate the second primary use of location.hash property.

The code in the JavaScript file has the changeAnchor() function which encapsulates the code described below:

  • Line 2: We fetch the <button> element using DOM and change its text dynamically using the innerText property when the user clicks on the <button> present on line 5 of the HTML document.
  • Line 3: We then make use of the location.hash property to set the href attribute of the <a> tag, as specified on line 6 of the HTML file.

RELATED TAGS

javascript

CONTRIBUTOR

Abdul Muizz
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring