Random Link Generator

@Brad_MclainJan 02.2007

Ok I’m looking to make a “link of the day” button or hyperlink using javascript. I found many examples on how to do this and got it to work using something like this:

[code] <html> <head> <script type=”text/javascript”> function go_to(url) { window.location=url; } function rand_link() { var a; a = 1+Math.round(Math.random()*3); if (a==1) go_to(“link1”); if (a==2) go_to(“link2”); if (a==3) go_to(“link3″); } </script> </head> <body> <FORM NAME=”myForm”> <INPUT TYPE=”button” NAME=”myButton” VALUE=”Random link” onClick=”rand_link()”> </FORM> </body> </html> [/code]

Ok this works fine except I would like to have the name of my button/hyperlink display which page it will take you to first as its name rather then “Random link”. Eg “Photos” or something. Now this does not have to be done using a button it could just be a hyperlink that generates a different name and destination each page load.

Is this possible? if so how would I go about it?

Brad

to post a comment

JavaScript

20 Comments(s) _↴

@OverstatementJan 02.2007 — #Yes it is but how would this work? Would you like to change the value onmouseover? From the start? Or after you click (and a few seconds after the value changes, the page redirects)?

Anyway, you can change the value of your button like this (you need to give your button an id, not a name):

<i>
 </i>document.getElementById("myButton").value = 'New Button Text';

@Brad_MclainauthorJan 02.2007 — #I think that the value changing on pageload would be best, so that the button/link is different everytime.

BTW I'm a complete newb to javascript so lots of explantation would be much appreciated ?

@ricpJan 02.2007 — #Probably something like this..

<i>
 </i>&lt;style type="text/css"&gt;
 #myLinkButton { display:none }
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;
 var randomLinks = [
 {link: "http://www.linkone.com", name: "Link One" },
 {link: "http://www.linktwo.com", name: "Link Two" },
 {link: "http://www.linkthree.com", name: "Link Three" },
 {link: "http://www.linkfour.com", name: "Link Four" }
 ]
 var randomLinkNumber = Math.floor(Math.random()*randomLinks.length);
 
 function gotoLink() {
 window.location = randomLinks[randomLinkNumber].link;
 }
 
 onload = function() {
 var linkButton = document.getElementById("myLinkButton");
 if (linkButton) {
 linkButton.value = "Go To "+randomLinks[randomLinkNumber].name;
 linkButton.style.display = "inline";
 }
 }
 &lt;/script&gt;

[code=html]
 <input type="button" id="myLinkButton" onclick="gotoLink()" />
 [/code]

Which would do what you want, plus not show the button if no javascript was present.

Each of the links are held in an array of objects, to add more links simply add more objects in the format..

{ link: "http:// .. link to new site .. ", name: " .. name of site .. " }

..remembering to add a , at the end of each one except the last entry.

The random number is generated as the page is rendered and onload the js displays the button (previously hidden by the style definition).

Both the <style> and <script> should go in the <head> .. in here .. </head> section.

@OverstatementJan 02.2007 — #Ohhh, you're just trying to get back at me for all the times I posted before you.

@ricpJan 02.2007 — #Ohhh, you're just trying to get back at me for all the times I posted before you.[/QUOTE]
Heh... no... I didn't realise you had posted, sorry.. ?

@Brad_MclainauthorJan 02.2007 — #Ok this is what I did:

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;!--
 &lt;style type="text/css"&gt;
 #myLinkButton { display:none }
 &lt;/style&gt;
 --&gt;
 &lt;script type="text/javascript"&gt;
 var randomLinks = [
 {link: "http://192.168.1.21/typo3/index.php?id=576", name: "Sunrise Footage" },
 {link: "http://192.168.1.21/typo3/index.php?id=578", name: "GIMP Videos" },
 {link: "http://192.168.1.21/typo3/index.php?id=238", name: "IT Articles and Magazines" },
 {link: "http://www.linkfour.com", name: "Link Four" }
 ]
 var randomLinkNumber = Math.floor(random()*randomLinks.length);
 
 function gotoLink() {
 window.location = randomLinks[randomLinkNumber].link;
 }
 
 onload = function() {
 var linkButton = document.getElementById("myLinkButton");
 if (linkButton) {
 linkButton.value = "Go To "+randomLinks[randomLinkNumber].name;
 linkButton.style.display = "inline";
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;input type="button" id="myLinkButton" onclick="gotoLink()"&gt;
 &lt;/body&gt;
 &lt;/html&gt;

All I get is a blank button that doesn't do anything when you click, I commented out the CSS because with it in the button did not show at all, any suggestions?, its probably a typo or something small like that.

@ricpJan 02.2007 — #Do you have anything already set on the onload? Either inline in code or via the body tag (ie: <body onload=" .. something here ..">).

Ah, I see what's happened, you copied the code when there was an error in it...

change the line...

<i>
 </i>var randomLinkNumber = Math.floor(random()*randomLinks.length);

..to..

<i>
 </i>var randomLinkNumber = Math.floor(Math.random()*randomLinks.length);

@Brad_MclainauthorJan 02.2007 — #Not exactly sure, but I'm pretty sure that I don't. That is the only code in the html document. I'm running it as a test before implementing into the site.

@ricpJan 02.2007 — #Sorry it was a typo I noticed (and fixed) when I added the explanation. (read my amended last post).

You were too quick! :p

Although if you do plan on having something in the onload other than this script it might be better to change the code from..

<i>
 </i> onload = function() {
 var linkButton = document.getElementById("myLinkButton");
 if (linkButton) {
 linkButton.value = "Go To "+randomLinks[randomLinkNumber].name;
 linkButton.style.display = "inline";
 }
 }

..to..

<i>
 </i>function initButton {
 var linkButton = document.getElementById("myLinkButton");
 if (linkButton) {
 linkButton.value = "Go To "+randomLinks[randomLinkNumber].name;
 linkButton.style.display = "inline";
 }
 }
 if (window.attachEvent) 
 window.attachEvent("onload",initButton);
 else if (window.addEventListener) 
 window.addEventListener("load",initButton,true);

Using the event handers, attachEvent (for IE) addEventListener (for other browsers), will allow you to set the onload even call without interfering with anything else that might be on the page.

Sorry for that and hopefully I haven't created any confusion.

@Brad_MclainauthorJan 02.2007 — #Thanks man works beautiful now

Thanks for all your help guys! Much appreciated. ?

btw what is the code tag for a html box for future reference? (For this forum)

@ricpJan 02.2007 — #instead of [B]code[/B] in the [] use [B]html[/B]

@Brad_MclainauthorJan 02.2007 — #Hmm tried making the changes you suggested but I'm getting a blank button again.

[code=html]
 <html>
 <head>
 <!--
 <style type="text/css">
 #myLinkButton { display:none }
 </style>
 -->
 <script type="text/javascript">
 var randomLinks = [
 {link: "http://192.168.1.21/typo3/index.php?id=576", name: "Sunrise Footage" },
 {link: "http://192.168.1.21/typo3/index.php?id=578", name: "GIMP Videos" },
 {link: "http://192.168.1.21/typo3/index.php?id=238", name: "IT Articles and Magazines" },
 {link: "http://www.linkfour.com", name: "Link Four" }
 ]
 var randomLinkNumber = Math.floor(Math.random()*randomLinks.length);
 
 function gotoLink() {
 window.location = randomLinks[randomLinkNumber].link;
 }
 
 function initButton {
 var linkButton = document.getElementById("myLinkButton");
 if (linkButton) {
 linkButton.value = "Go To "+randomLinks[randomLinkNumber].name;
 linkButton.style.display = "inline";
 }
 }
 if (window.attachEvent) 
 window.attachEvent("onload",initButton);
 else if (window.addEventListener) 
 window.addEventListener("load",initButton,true);
 }
 </script>
 </head>
 <body>
 <input type="button" id="myLinkButton" onclick="gotoLink()">
 </body>
 </html>
 [/code]

@ricpJan 03.2007 — #You have a rogue } at the end of your code just before the closing </script> tag.

@Brad_MclainauthorJan 03.2007 — #No still not showing up

[code=html]
 <html>
 <head>
 <!--
 <style type="text/css">
 #myLinkButton { display:none }
 </style>
 -->
 <script type="text/javascript">
 var randomLinks = [
 {link: "http://192.168.1.21/typo3/index.php?id=576", name: "Sunrise Footage" },
 {link: "http://192.168.1.21/typo3/index.php?id=578", name: "GIMP Videos" },
 {link: "http://192.168.1.21/typo3/index.php?id=238", name: "IT Articles and Magazines" },
 {link: "http://192.168.1.21/typo3/index.php?id=559", name: "Openoffice.org Tutorials" },
 {link: "http://192.168.1.21/typo3/index.php?id=557", name: "Inkscape Tutorials" },
 {link: "http://192.168.1.21/typo3/index.php?id=558", name: "Scribus Tutorials" },
 {link: "http://192.168.1.21/typo3/index.php?id=535", name: "GIMP Tutorials" }
 ]
 var randomLinkNumber = Math.floor(Math.random()*randomLinks.length);
 
 function gotoLink() {
 window.location = randomLinks[randomLinkNumber].link;
 }
 
 function initButton {
 var linkButton = document.getElementById("myLinkButton");
 if (linkButton) {
 linkButton.value = "Go To "+randomLinks[randomLinkNumber].name;
 linkButton.style.display = "inline";
 }
 }
 if (window.attachEvent) 
 window.attachEvent("onload",initButton);
 else if (window.addEventListener) 
 window.addEventListener("load",initButton,true);
 
 </script>
 </head>
 <body>
 <input type="button" id="myLinkButton" onclick="gotoLink()">
 </body>
 </html>
 [/code]

@ricpJan 03.2007 — #Heh... what is funny is that I normally hassle people for answering with poor code on this forum and here I am doing exactly that (albeit a typo). Oh, the irony.... anyway, the problem is a missing () in the initButton function declaration.

<i>
 </i>function initButton() {

That'll solve it (finally).. ?

(for all the rest of the posters who I've pointed the finger at, feel free to do the same back now.. :rolleyes: :p)

@Brad_MclainauthorJan 03.2007 — #Edit: I fixed it, I'll update the code to working version.

[code=html]
 <html>
 <head>
 <!--
 <style type="text/css">
 #myLinkButton { display:none }
 </style>
 -->
 <script type="text/javascript">
 var randomLinks = [
 {link: "http://192.168.1.21/typo3/index.php?id=576", name: "Sunrise Footage" },
 {link: "http://192.168.1.21/typo3/index.php?id=578", name: "GIMP Videos" },
 {link: "http://192.168.1.21/typo3/index.php?id=238", name: "IT Articles and Magazines" },
 {link: "http://192.168.1.21/typo3/index.php?id=559", name: "Openoffice.org Tutorials" },
 {link: "http://192.168.1.21/typo3/index.php?id=557", name: "Inkscape Tutorials" },
 {link: "http://192.168.1.21/typo3/index.php?id=558", name: "Scribus Tutorials" },
 {link: "http://192.168.1.21/typo3/index.php?id=535", name: "GIMP Tutorials" }
 ]
 var randomLinkNumber = Math.floor(Math.random()*randomLinks.length);
 
 function gotoLink() {
 window.location = randomLinks[randomLinkNumber].link;
 }
 
 function initButton() {
 var linkButton = document.getElementById("myLinkButton");
 if (linkButton) {
 linkButton.value = "Go To "+randomLinks[randomLinkNumber].name;
 linkButton.style.display = "inline";
 }
 }
 if (window.attachEvent) {
 window.attachEvent("onload",initButton);
 }
 else if (window.addEventListener) {
 window.addEventListener("load",initButton,true);
 }
 </script>
 </head>
 <body>
 <input type="button" id="myLinkButton" onclick="gotoLink()">
 </body>
 </html>
 [/code]

Ok now that that's done how hard would it be to make that button into a changing hyperlink?

Eg

Link of the Day: (changing hyperlink)

instead of

Link of the Day: (changing button)

Which is how I've currently got it set up.

Thanks for the ongoing support btw, much appreciated.

@ricpJan 03.2007 — #Very easy as it's more or less the same code..

Change the initButton function to..

<i>
 </i>function initLink() {
 var linkTag = document.getElementById("myLinkTag");
 if (linkTag) {
 linkTag.innerHTML = "Go To "+randomLinks[randomLinkNumber].name;
 linkTag.href = randomLinks[randomLinkNumber].link;
 linkTag.style.display = "inline";
 }
 }

Remove the [i]gotoLink[/i] function as it's no longer needed. And change the HTML to..

[code=html]
 <a id="myLinkTag"></a>
 [/code]

And as we've changed the id of the element, we need to reflect that in the style sheet..

<i>
 </i>#myLinkTag { display:none; }

That'll do you (if I've not managed another typo that is).

@Brad_MclainauthorJan 03.2007 — #Thankyou works perfectly, now to decide which one to use, I'm thinking the link suits the situation better.

I think that that is all, (well i hope anyway). Thankyou for all your help.

@metalmickeyJul 18.2008 — #Great peice of code

@metalmickeyJul 19.2008 — #Hello, please can you help, I would like a changing hyperlink instead of a button but being totally useless at all this I can't follow where to put what to change it.

Would it be possible to include the hperlink code to what you have already done so I can just insert it into my webpage.

Sorry if this sounds a bit lazy but I have tried for ages but can't get it right.

Cheers.

Also in #JavaScript _↴

dropdown I'm New!!!How do I add a text array to a existing Image gallery

Success!

Help @Brad_Mclain spread the word by sharing this article on Twitter...

Tweet This

Random Link Generator

20 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Random Link Generator

20 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

20 Comments(s) _↴

Also in #JavaScript _↴