next → ← prev

JavaScript hashchange Event

The hashchange event works to identify th the URL changes starting with the hashtag. The hash (#) tag starts with the URL or follows the URL to change the one to another link.

Syntax

The following event uses in the html with the script tag. We can see the event with the function for changing the hash link.

<body onhashchange = "functionHandler(event)">
//write code.
<script>
Function functionHandler(event){
//write javascript code.
}
</script>
</body>

Examples

The following examples show the event information after working hashchange event with different functionalities.

Example 1

The basic hash charge event work with the location.hash event using the javascript functionality. We can get the alert message when the hash link change from one URL to another.

<!DOCTYPE html>
<html>
<head>
<title> JavaSCript HashChangeEvent Example </title>
<meta charset="UTF-8">
<style>
.tutorials {
margin-top: 20px;
padding: 4px;
border: 1px solid black;
}
</style>
</head>
<body onhashchange = "functionHandler(event)">
<h2> JavaSCript HashChangeEvent API </h2>
<p id = "demos"></p>
<button onclick="changehashUrlPart()">Try it</button>
<script>
// Using the location.hash property to change the url part
function changehashUrlPart() {
location.hash = "bodytag";
var x_hash = location.hash;
document.getElementById("demos").innerHTML = "The anchor part is now: " + x_hash;
}
function functionHandler(evt)  {
var msg = "Hash Changes with the URL! \n"
+ "event.newURL= "+ evt.newURL ;
alert(msg);
}
</script>
</body>
</html>

Output

The data shows the output of the hashchange event function.

JavaScript hashchange Event

Example 2

The following example uses a hashchange event with the different hash URLs on one page. Here, we use the id and its reference for the hashchange event. The function used on the body tag to operate for every url change.

<!DOCTYPE html>
<html>
<head>
<title> JavaSCript HashChangeEvent Example </title>
<meta charset="UTF-8">
<style>
.tutorials {
margin-top: 20px;
padding: 4px;
border: 1px solid black;
}
</style>
<script>
function functionHandler(evt)  {
var msg = "Hash Changes with the URL! \n"
alert(msg);
}
</script>
</head>
<body onhashchange="functionHandler(event)">
<h2> JavaSCript HashChangeEvent API </h2>
<a href="#Tutorial1">Go to Tutorial 1</a>
||
<a href="#Tutorial2">Go to Tutorial 2</a>
||
<a href="#Tutorial3">Go to Tutorial 3</a>
<div class="tutorials">
<!-- Anchor 1 -->
<a id="Tutorial1"></a>
<h3>Tutorial 1</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
<!-- Anchor 2 -->
<a id="Tutorial2"></a>
<h3>Tutorial 2</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
<!-- Anchor 3 -->
<a id="Tutorial3"></a>
<h3>Tutorial 3</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
</div>
</body>
</html>

Output

The data shows the output of the hashchange event function.

JavaScript hashchange Event

Example 3

The following example uses a hashchange event with the different hash URLs on one page. We can see the current url and old url changes using a single page. We can get the hashchange event to know the changed url from the different hash.

<!DOCTYPE html>
<html>
<head>
<title> JavaSCript HashChangeEvent Example </title>
<meta charset="UTF-8">
<style>
.tutorials {
margin-top: 20px;
padding: 4px;
border: 1px solid black;
}
</style>
<script>
function functionHandler(evt)  {
var msg = "Hash Changes with the URL! \n"
+ "event.newURL= "+ evt.newURL +"\n"
+ "event.oldURL= "+ evt.oldURL ;
alert(msg);
document.getElementById("demos").innerHTML = msg;
}
</script>
</head>
<body onhashchange="functionHandler(event)">
<h2> JavaSCript HashChangeEvent API </h2>
<p id = "demos"></p>
<a href="#Tutorial1">Go to Tutorial 1</a>
||
<a href="#Tutorial2">Go to Tutorial 2</a>
<div class="tutorials">
<!-- Anchor 1 -->
<a id="Tutorial1"></a>
<h3>Tutorial 1</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
<!-- Anchor 2 -->
<a id="Tutorial2"></a>
<h3>Tutorial 2</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
</div>
</body>
</html>

Output

The data shows the output of the hashchange event function.

JavaScript hashchange Event

Example4

The following example uses the document hash location to change the values. We can see the url of the document with the click function.

<!DOCTYPE html>
<html>
<head>
<title> JavaSCript HashChangeEvent Example </title>
<meta charset="UTF-8">
<style>
</style>
</head>
<body onhashchange = "functionHandler(event)">
<h2> JavaSCript HashChangeEvent API </h2>
<p id = "demos"> Event Uses with Document Hash Location </p>
<button onclick="changehashUrl()">Try it</button>
<script>
// Using the location.hash property to change the url part
function changehashUrl() {
document.location.hash = "clickFun";
}
function functionHandler(evt)  {
var msg = "Hash Changes with the URL! \n";
msg += "The current document location: " + document.location + "\n";
msg += "The current hash URL: " + document.location.hash;
alert(msg);
}
</script>
</body>
</html>

Output

The data shows the output of the hashchange event function.

JavaScript hashchange Event

Example 5

The following example uses a hashchange event with the different hash URLs on one page. We can see the addEventListner method with the hashchange event. The event works with the function. The function displays output when the hash of the url change.

<!DOCTYPE html>
<html>
<head>
<title> JavaSCript HashChangeEvent Example </title>
<meta charset="UTF-8">
<style>
.tutorials {
margin-top: 20px;
padding: 4px;
border: 1px solid black;
}
</style>
<script>
window.addEventListener("hashchange", myFunction);
function myFunction() {
document.getElementById("demos").innerHTML = "The the URL hash part has changed!";
}
</script>
</head>
<body id="bodies">
<h2> JavaSCript HashChangeEvent API </h2>
<p id = "demos"></p>
<a href="#Tutorial1">Go to Tutorial 1</a>
||
<a href="#Tutorial2">Go to Tutorial 2</a>
<div class="tutorials">
<!-- Anchor 1 -->
<a id="Tutorial1"></a>
<h3>Tutorial 1</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
<!-- Anchor 2 -->
<a id="Tutorial2"></a>
<h3>Tutorial 2</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
</div>
</body>
</html>

Output

The data shows the output of the hashchange event function.

JavaScript hashchange Event

Example 6

The basic hashchage event works with the window event using the javascript functionality. We can get the information after change url using the "window.onhashchange " function.

<!DOCTYPE html>
<html>
<body>
<h4> JavaSCript HashChangeEvent API </h4>
<button onclick="changehashPart()">Test</button>
<p id="demos"></p>
<p id="demos1"></p>
<script>
function changehashPart() {
location.hash = "section";
var x_var = location.hash;
document.getElementById("demos").innerHTML = "The URL part is now: " + x_var;
}
window.onhashchange = myhashFunction;
function myhashFunction() {
document.getElementById("demos1").innerHTML = "The Hash URL has changed!";
}
</script>
</body>
</html>

Output

The data shows the output of the hashchange event function.

JavaScript hashchange Event

Conclusion

The events work on multiple URLs and hash links on the same page. It helps to maintain and operate the track of the changes link.

Next TopicThe Oninput Function in Javascript

← prev next →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk tutorial

Splunk

SPSS

Swagger tutorial

Swagger

Transact-SQL

Tumblr tutorial

Tumblr

ReactJS

Regex

Reinforcement learning tutorial

Reinforcement Learning

R Programming tutorial

R Programming

RxJS

React Native tutorial

React Native

Python Design Patterns

Python Design Patterns

Python Pillow tutorial

Python Pillow

Python Turtle tutorial

Python Turtle

Keras

Preparation

Aptitude

Logical Reasoning

Reasoning

Verbal Ability

Interview Questions

Company Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

Artificial Intelligence

AWS

Selenium tutorial

Selenium

Cloud Computing

Cloud Computing

Hadoop tutorial

Hadoop

ReactJS Tutorial

ReactJS

Data Science Tutorial

Data Science

Angular 7 Tutorial

Angular 7

Blockchain Tutorial

Blockchain

Git

Machine Learning Tutorial

Machine Learning

DevOps Tutorial

DevOps

B.Tech / MCA

DBMS

Data Structures tutorial

Data Structures

DAA

Operating System

Operating System

Computer Network tutorial

Computer Network

Compiler Design tutorial

Compiler Design

Computer Organization and Architecture

Computer Organization

Discrete Mathematics Tutorial

Discrete Mathematics

Ethical Hacking

Ethical Hacking

Computer Graphics Tutorial

Computer Graphics

Software Engineering

Software Engineering

Web Technology

Cyber Security tutorial

Cyber Security

Automata Tutorial

Automata

C Language tutorial

C Programming

C++

Java

.Net Framework tutorial

.Net

Python tutorial

Python

List of Programs

Programs

Control Systems tutorial

Control System

Data Mining Tutorial

Data Mining

Data Warehouse Tutorial

Data Warehouse

^{Like/Subscribe us for latest updates or newsletter}

Subscribe to Get Email Alerts

YouTube