Skip to content
Advertisements

JavaScript onhashchange Event

Why onhashchange ?

The JavaScript onhashchange feature works when the anchor portion of the current page’s URL is modified. The anchor is called the ‘#’ symbol that starts with the ‘#’. For example, “https: //truecodes.org#example”. The anchor part here is “#example”.

Syntax:

<element onchange=”script”>

  • script :Script to run when the web page diameter changes.

JavaScript onhashchange Examples

Example 1

onhashchange example 1
<body onhashchange="changeHash">

    <button onclick="change()">CHANGE</button>
    <p id="result"></p>

    <script>

        function change() {
            location.hash = "example";
            var url = location.hash;
            document.getElementById("result").innerHTML = url;
        }

        function changeHash() {
            alert("hash part changed.")
        }

    </script>
</body>

Example 2

onhashchange example 2
<body>

    <button onclick="change()">CHANGE</button>
    <p id="result"></p>

    <script>
        function change() {
            location.hash = "example";
            var url = location.hash;
            document.getElementById("result").innerHTML = url;
        }

        document.getElementsByTagName("BODY")[0].onhashchange = function() {
            changeHash();
        };

        function changeHash() {
            alert("hash part changed.")
        }

        
    </script>
</body>

Example 3

onhashchange example 3
<body>

    <button onclick="change()">CHANGE</button>
    <p id="result"></p>

    <script>

        window.onhashchange = changeHash;

        function change() {
            location.hash = "example";
            var url = location.hash;
            document.getElementById("result").innerHTML = url;
        }

        function changeHash() {
            alert("hash part changed.")
        }

    </script>
</body>

Example 4

onhashchange example 4
<body>

    <button onclick="change()">CHANGE</button>
    <p id="result"></p>

    <script>

        addEventListener("hashchange", changeHash)

        function change() {
            location.hash = "example";
            var url = location.hash;
            document.getElementById("result").innerHTML = url;
        }

        function changeHash() {
            alert("hash part changed.")
        }

    </script>
</body>

Example 5

onhashchange example 5
<body>

    <input type="text" id="txt" value="truecodes.org" onchange="changeFunction(this.value)"/>

    <script>

        function changeFunction(hash) {
            alert("new has: " + hash)
        }

    </script>
</body>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: