How do I make a link update itself when its clicked?
<p>I have next link that lets users navigate through a list of URL (stored in array). When a user clicks next, I want the link href and anchor to be updated for the next website in my array. The way I've tried so far, it link skips one URL each time, and I have and idea why, it has to do with the previous click even not completing, but what's the right way to do this?</p>

<p>Here is an example so you can see exactly what I'm talking about: <a href="http://jsbin.com/atobep">http://jsbin.com/atobep</a></p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;


$(document).ready(function(){

    var items = [];
    $.each(urls, function(i, item) {
        items.push("&lt;li&gt;"+item['name']+"&lt;/li&gt;");
    });

    $('#list').append(items.join(''));

    changeNextLink(0);
    $("#frame").attr('src', urls[0]['url']);

});

var urls = [{"name":"ebay","url":"http://ebay.com"},{"name":"amazon","url":"http://amazon.com"},{"name":"msn","url":"http://msn.com"},{"name":"yahoo","url":"http://yahoo.com"},{"name":"wikipedia","url":"http://wikipedia.org"}];

function changeNextLink(x){     

    $('#now').html(urls[x]['name']); //show the name of currently loaded page
    $('#nextLink').html(urls[x+1]['name']); //name of next website as anchor of next link
    $('#nextLink').attr('href', urls[x+1]['url']); //url to next website
    $('#nextLink').attr('onclick','changeNextLink('+(x+1)+')'); //the problem spot. prepare next link for next click.

}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;ol id="list"&gt;&lt;/ol&gt;

    now: &lt;span id="now"&gt;&lt;/span&gt; | next: &lt;a href="" target="frame" id="nextLink"&gt;&lt;/a&gt;&lt;br /&gt;
    &lt;iframe name="frame" src="" id="frame" style="width:500px; height:600px;"&gt;&lt;/iframe&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
