Hash value if not null calls function by same value

I have a request from a client where he needs changing elements on the page to be selected when needed according to the hashtag in the URL.

The page is already working so this is a step on, so at the moment I have this

<a href="#" onclick="BRAND()">pic</a>

which calls -

function BRAND(){
$('header').css({'background':'url(../img/modules/Brand.png)'});
$('header h1 span').text("BrandCheck");
$('header .intro-text p').text("provides the tools and support necessary to create, develop, maintain or protect the business brand standards.");
$('header .intro-text .modules_header_black .link').text("Download BrandCheck PDF");
$('header .intro-text .modules_header_black').css({'background-color':'#f68834'});

var a = document.getElementById('module_link');
a.href = "/PDF/Cristal_BrandCheck_Datasheet.pdf"
};

That works fine, and there 11 of them.

But what he wants is say the url contains the function name as below -

http://whatsit.co.uk/page.php#BRAND

That calls the function above also, so I put below together, but its not calling the function

var hash = window.location.hash.slice(1);
$( document ).ready(function() {
if (hash){
hash();
} else {
$('header').css({'background':'url(../img/modules/Brand.png)'});
stuff in here
}});

That’s because hash is not a function but a string. You might store references to the corresponding functions in an object though, like

var fns = {
  BRAND: BRAND,
  myOtherHash: myOtherFunction,
  // etc.
}

The properties of that object can then be accessed with regular strings:

var hash = window.location.hash.substr(1)
var fn = fns[hash]

if (fn) {
  fn()
}
1 Like

Cheers,

that works really well.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.