Question

Having a slight Javascript issue at the moment, I am hoping to have the below image have a variable HREF which is triggered by a time change.

At the moment it is triggering to some extent but then getting stuck on one of the URLs. It is also affecting an image which is overlaid on top of this one. Which isn’t the aim at all!

Any help would be great. Thanks.

<div style="position: absolute; left: 0; top: 0; z-index: 100"><a href="[VARIABLE     URL]"><img src="[BACKGROUNDIMAGE]" style="position: absolute top: 0; left: 0;"/></a></div>

<script type="text/JavaScript">

setTimeout(hyperlink1,3000);
setTimeout(hyperlink2,3000); 
setTimeout(hyperlink3,3000);

function hyperlink1 () {
$("a").attr("href", "[URL1]")
}

function hyperlink2 () {
$("a").attr("href", "[URL2]")
}

function hyperlink3 () {
$("a").attr("href", "[URL3]")
}

</script>

Answer 1

Your selector, "a", will match all a elements on the page. That means all three of your functions, all of which are fired after roughly three seconds, will change all of the links to the same URL.

You need to have each selector be specific to the link it’s going to change. You can do that with ids on the links, or by their (original) href, or using a class, etc.

Also note that all three of your functions are being fired at almost exactly the same time. If that’s your goal, just use a single function to do all the updates. If your goal is to have one fire, then the next, then the next, either chain them:

setTimeout(hyperlink1,3000);

function hyperlink1 () {
    $("a").attr("href", "[URL1]")
    setTimeout(hyperlink2,3000); 
}

function hyperlink2 () {
    $("a").attr("href", "[URL2]")
    setTimeout(hyperlink3,3000);
}

function hyperlink3 () {
    $("a").attr("href", "[URL3]")
}

…or use a single function which walks through an array. It depends on how complex the real functions will be and whether you’re trying to repeatedly update just one link, or update a series of links one at a time.

If you have just the one link, and you’re just trying to update it repeatedly, you might just walk an array like this:

function update() {
    var index = 0,
        urls = [
          "/path/to/first",
          "/path/to/second",
          "/path/to/third"
        ];
     setTimeout(tick, 3000);

     function tick() {
         var href = urls[index++];
         if (href) {
             $("a").attr("href", href);
             if (index < urls.length) {
                 setTimeout(tick, 3000);
             }
         }
     }
}
update();

…but if it’s really just the three you’ve listed, well, the three functions chained via setTimeout is concise and clear. Concise and clear are Good Things^(tm).