Databases
StackOverflow2013
Postsdbo
POHow do I make a link update itself when its clicked?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I make a link update itself when its clicked?
    text
    copied!<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" rel="noreferrer">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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload