Question

I have made a website where, upon choosing an item in the menu bar, the screen moves to a specific spot on the page. I then made a function in which the text changes in two spots, “titletext” and “infotext”. Example:

<li><a href="#content" onclick='changeText()'>Weeee!</a></li>

It works but now I realize I have a problem: When I choose to go back to the previous page, the text remains the same, until the user chooses to refresh the page.

Using Javascript, how can I tell the website to change the text when (for example) the page is on #content and change the text again when it’s on the home page? Do I have to take a different approach with my code?

Below is my code for changeText():

function changeText(){
    document.getElementById('titletext').innerHTML = 'Mission Statement';
    document.getElementById('infotext').innerHTML = 'RANDOMTEXT';
}

EDIT: Here’s an example of what I want my website to do.

When the user hits the back button on the browser, the text changes to
the previous text. So if it shows “Hey” then it shows “Bye”, when the
user hits the browser’s back button, the code changes to “Hey”

Answer 1

Take a look at this jQuery plugin which allows you to listen to #hash change events. Basically, once you installed that plugin, you can have something like this:

window.onhashchange = function() { //when the hash changes (the '#' part)
    var loc = window.location + ""; //get the current location (from the address bar)
    var curHash = loc.substr(loc.lastIndexOf("#")); //get what's after the '#'
    if(curHash == "#home") { //if it's #home
        //change text to whatever you want
    }
    else if(curHash == "#nav") { //else if it's #nav
        //similarly, change text appropriately
    }
    else if(curHash == "#content") {
        //change text, too
    }
};

Edit: Actually, the onhashchange is already supported in current versions of modern browsers. Use the same code above, but nevermind about the plugin.

There might be a simpler way to do this; but I hope this helped!