window.location.hash always returns the previous and not the current hash

Question

so I made a mapped image in html/css/javascript. I made it so when I click on an area a function get's called that makes a modal appear, the content depends on the location.hash that changes due to the href attribute in the mapped areas. The thing is, it is always the previous hash and not the current one, for example:

- #hash1
- #hash2, location.hash returns: #hash1
- #hash3, location.hash returns: #hash2
- #hash4, location.hash returns: #hash3
- #hash5, location.hash returns: #hash4
- #hash6, location.hash returns: #hash5
- #hash7, location.hash returns: #hash6

etc.

Why is that? And how do I fix this?

summary of the code I use:

<img src="image.png" width="300" height="300" usemap='#modalmap'>

<map name="modalmap">
    <area shape="rect" coords="0,0,150,150" alt="topleft" href="#topleft" target="_self" title="topleft" onclick="appearModal(event)">
    <area shape="rect" coords="150,0,300,150" alt="topright" href="#topright" target="_self" title="topright" onclick="appearModal(event)">
    <area shape="rect" coords="0,150,150,300" alt="bottomleft" href="#bottomleft" target="_self" title="bottomleft" onclick="appearModal(event)">
    <area shape="rect" coords="150,150,300,300" alt="bottomright" href="#bottomright" target="_self" title="bottomright" onclick="appearModal(event)">
</map>
<script>
function appearModal(event){
    switch(location.hash){
    case "#topright":
    console.log(location.hash);
    break;
case "#bottomright":
    console.log(location.hash);
    break;
case "#bottomleft":
    console.log(location.hash);
    break;
case "#topleft":
    console.log(location.hash);
    break;
default:
    console.log(location.hash);

}
</script>

I suggest listening to `window.onhashchange` instead of getting the hash after click (when it's not set yet) — Erik Terwan, Jan 25 '18 at 12:34

Fellipe Augusto da Silva · Answer 1 · 2018-01-25T12:37:04.417

The problem is that your function is getting the location.hash before it's changed. To fix it, you'll have to get the hash directly from the element that you clicked.

I've attached a codepen with the solution:

Codepen

<img src="image.png" width="300" height="300" usemap='#modalmap'>

<map name="modalmap">
    <area shape="rect" coords="0,0,150,150" alt="topleft" href="#topleft" target="_self" title="topleft" onclick="appearModal(event)">
    <area shape="rect" coords="150,0,300,150" alt="topright" href="#topright" target="_self" title="topright" onclick="appearModal(event)">
    <area shape="rect" coords="0,150,150,300" alt="bottomleft" href="#bottomleft" target="_self" title="bottomleft" onclick="appearModal(event)">
    <area shape="rect" coords="150,150,300,300" alt="bottomright" href="#bottomright" target="_self" title="bottomright" onclick="appearModal(event)">
</map>

function appearModal(event) {

    var hash = event.target.hash;
    switch (hash) {
        case "#topright":
            console.log(hash);
            break;
        case "#bottomright":
            console.log(hash);
            break;
        case "#bottomleft":
            console.log(hash);
            break;
        case "#topleft":
            console.log(hash);
            break;
        default:
            console.log(hash);

    }
}

I did, but it only starts counting when I hit a reputation of 15, it says — kurganon, Jan 25 '18 at 12:40

score 0 · Answer 2 · answered Jan 25 '18 at 12:35

try this:

function appearModal(event) {
    setTimeout(function() {
        switch (location.hash) {
            case "#topright":
                console.log(location.hash);
                break;
            case "#bottomright":
                console.log(location.hash);
                break;
            case "#bottomleft":
                console.log(location.hash);
                break;
            case "#topleft":
                console.log(location.hash);
                break;
            default:
                console.log(location.hash);
        }
    }, 10);
}

this happens because the browser execute your onclick function first,and then change the hash,so you always get the previous hash.

the code up works by let the hash changing happen first and then execute the onclick function because the setTimeout can let other procedure execute first until the process free

try to understand the principle, that will help you a lot later — xianshenglu, Jan 25 '18 at 12:39

window.location.hash always returns the previous and not the current hash

2 Answers2