Spunky Posted October 7, 2008 Share Posted October 7, 2008 Random link <---Code for a random link to show up( or images or whatever)If I wanted a possibility of 3(or more) different links rather than 2, how would I do that? I tried it on my own with no luck.What if I wanted a random link to show up in more than one spot with no repeats?For exampleRandom Slot ARandom Slot BRandom Slot CThe choices that could show up in each of the 3 slots..ChairCouchBearCatDogMonkeyBut I don't want any of them to show up in both Slot A and Slot B at the same time...Sometimes people need a visual and I figured it would be the best way to show my case...lol Link to comment Share on other sites More sharing options...
Spunky Posted October 8, 2008 Author Share Posted October 8, 2008 I really did not think this was going to be difficult for this question to be answered...I understand the code for the link I gave..it is basic and I know enough JavaScript...I just want to know how to expand that code.. Link to comment Share on other sites More sharing options...
jesh Posted October 8, 2008 Share Posted October 8, 2008 One way to do it is to keep track of which random numbers you've generated in the past (i.e. for Slot A) and not use those numbers again later on (i.e. for Slot . In your case, since you only have 6 elements (e.g. Chair, Couch, Bear, etc.), a simple way to store those previously generated random numbers is in a string and then use indexOf to see if the number has been used before: <html><body><div id="d1"></div><div id="d2"></div><div id="d3"></div><script type="text/javascript">var types = ["Chair", "Couch", "Bear", "Cat", "Dog", "Monkey"];var num;var prevnums = "";for(var i = 1; i <= 3; i++){ do { num = Math.floor(Math.random() * types.length); } while(prevnums.indexOf(num) >= 0); prevnums += num; document.getElementById("d" + i).innerHTML = types[num];}</script></body></html> Link to comment Share on other sites More sharing options...
Spunky Posted October 9, 2008 Author Share Posted October 9, 2008 Ok, thanks so much for the response. I understand for the most part how this works. I learn better hands on, being given code and then figuring it out why it works. However, I can't seem to figure out what "num" and "prevnums" is, neither seem to be able to changed to something different like "types" can so they must be something specific. No matter, my main concern is if I can use images instead of text? I tried and it did not work. I was able to use images instead of links in the link I gave in my original post, but am not sure why not in this one. Link to comment Share on other sites More sharing options...
jesh Posted October 9, 2008 Share Posted October 9, 2008 It works pretty much the same with images. I've renamed the variables in hopes of making it make more sense: <html><body><img id="i1"></img><img id="i2"></img><img id="i3"></img><script type="text/javascript">var theImages = ["http://w3schools.invisionzone.com/style_images/1/css_img_code.gif","http://w3schools.invisionzone.com/style_images/1/p_up.gif","http://w3schools.invisionzone.com/style_images/1/p_mq_add.gif","http://w3schools.invisionzone.com/style_images/1/p_quote.gif","http://w3schools.invisionzone.com/style_images/1/p_report.gif","http://w3schools.invisionzone.com/style_images/1/pip.gif"];var randomNumber;var previouslyUsedRandomNumbers = "";for(var i = 1; i <= 3; i++){ do { randomNumber = Math.floor(Math.random() * theImages.length); } while(previouslyUsedRandomNumbers.indexOf(randomNumber) >= 0); previouslyUsedRandomNumbers += randomNumber; document.getElementById("i" + i).src= theImages[randomNumber];}</script></body></html> Link to comment Share on other sites More sharing options...
Spunky Posted October 9, 2008 Author Share Posted October 9, 2008 Ok, I see, the only difference is use "img" rather than "div" cool no problem.Ok I see you changed "num" and "prevnums" to "randomNumber" and "previouslyUsedRandomNumbers" Is that what they have to be or can it be anything? I find that if I change it to be something else, it does not work (yes I keep it consistent throughout). And I am not sure why, but thanks cuz that did help me understand what it is. I dont care if I cant change it, I just want a better understanding of it so I want to know if I CAN change it.Thank you SO much for help though, SO close to getting it to do what I need. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 9, 2008 Share Posted October 9, 2008 You can use any variable name you want that isn't a reserved name. <html><body><img id="i1"></img><img id="i2"></img><img id="i3"></img><script type="text/javascript">var omglol = ["http://w3schools.invisionzone.com/style_images/1/css_img_code.gif","http://w3schools.invisionzone.com/style_images/1/p_up.gif","http://w3schools.invisionzone.com/style_images/1/p_mq_add.gif","http://w3schools.invisionzone.com/style_images/1/p_quote.gif","http://w3schools.invisionzone.com/style_images/1/p_report.gif","http://w3schools.invisionzone.com/style_images/1/pip.gif"];var wtf;var rofl = "";for(var i = 1; i <= 3; i++){ do { wtf = Math.floor(Math.random() * omglol.length); } while(rofl.indexOf(wtf) >= 0); rofl += wtf; document.getElementById("i" + i).src= omglol[wtf];}</script></body></html> That method of keeping track of previous numbers is only going to work for fewer than 10 items though. You could use a delimiter to make sure it works for any series. <html><body><img id="i1"></img><img id="i2"></img><img id="i3"></img><script type="text/javascript">var theImages = ["http://w3schools.invisionzone.com/style_images/1/css_img_code.gif","http://w3schools.invisionzone.com/style_images/1/p_up.gif","http://w3schools.invisionzone.com/style_images/1/p_mq_add.gif","http://w3schools.invisionzone.com/style_images/1/p_quote.gif","http://w3schools.invisionzone.com/style_images/1/p_report.gif","http://w3schools.invisionzone.com/style_images/1/pip.gif"];var randomNumber;var previouslyUsedRandomNumbers = "";for(var i = 1; i <= 3; i++){ do { randomNumber = Math.floor(Math.random() * theImages.length); } while(previouslyUsedRandomNumbers.indexOf("|" + randomNumber + "|") >= 0); previouslyUsedRandomNumbers += "|" + randomNumber + "|"; document.getElementById("i" + i).src= theImages[randomNumber];}</script></body></html> Link to comment Share on other sites More sharing options...
Spunky Posted October 9, 2008 Author Share Posted October 9, 2008 Omg good thanks! I had asked about 6 just thinking that as long as it was more than 2 and in different slots it would work but apparently only with less than 10 so good that code will be quite helpful! Thank you! I dont undertstand why when I myself changes the variable names it doesnt work......I must be doing something wrong..Ok, but I ran into another problem, apparently I also want text with the images, depending on what the image is depends on what the text will say (and have a certain hyperlink) Now, I tried figuring this out myself by adding div ids underneath the img ids. and using if..else..else..statements and whatnot, but I failed. Doesn't help that I am very new to JavaScript, but again, this is how I learn best....them tutorials dont show how to do this..it only shows the basics...which I am not good at turning into something more complicated like this myself..so anyways..I have a feeling to do what I need to do might be more complicated..I hope not too much more. I tried a bunch of things even reading up on "document.getElementById" and ".innerHTML". Nothing I did worked. Link to comment Share on other sites More sharing options...
Spunky Posted October 9, 2008 Author Share Posted October 9, 2008 if (document.getElementById("i1").src = "http://w3schools.invisionzone.com/style_images/1/p_mq_add.gif"{document.getElementById("d1").innerHTML = "YES!"}else{document.getElementById("d2").src = "NO!"} This is what I put at the bottom of the other code. Its just something basic to simply see if my idea would work. <div id="d1"></div><div id="d2"></div> Was also place on top with the img ids. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 9, 2008 Share Posted October 9, 2008 If you've got more than one "property" for each of your "items", like image URL, title, link, whatever, you should use an object. Objects in Javascript are really easy, an object is sort of like a variable with more than one value.So instead of an array of image URLs you would have an array of objects. There are two ways to make an object, you can either use the constructor and then define each property: var img = new Object;img.url = "http://w3schools.invisionzone.com/style_images/1/css_img_code.gif";img.title = "Image 1";img.link = "http://google.com"; or you can use an object literal, which is a shortcut. This will make the same object: var img = { url: "http://w3schools.invisionzone.com/style_images/1/css_img_code.gif", title: "Image 1", link: "http://google.com"}; So to set up an array of objects would look like this: var theImages = [{ url: "http://w3schools.invisionzone.com/style_images/1/css_img_code.gif", title: "Image 1", link: "http://google.com"},{ url: "http://w3schools.invisionzone.com/style_images/1/p_up.gif", title: "Image 2", link: "http://slashdot.org"},{ url: "http://w3schools.invisionzone.com/style_images/1/p_mq_add.gif", title: "Image 3", link: "http://xkcd.com"}]; Then you would replace this line to use the object:document.getElementById("i" + i).src= theImages[randomNumber]; document.getElementById("i" + i).src= theImages[randomNumber].url;document.getElementById("t" + i).innerHTML= theImages[randomNumber].title;document.getElementById("l" + i).href= theImages[randomNumber].link; Link to comment Share on other sites More sharing options...
Spunky Posted October 9, 2008 Author Share Posted October 9, 2008 Ok, I will try that out and if I have any issues I will be back, lol. Link to comment Share on other sites More sharing options...
Spunky Posted October 9, 2008 Author Share Posted October 9, 2008 I have not had a chance to work this into the code but I just realized, what you told me to do is going to make it itself clickable but what about putting text near it? I dont want the picture to be the hyperlink but instead a text near it like "Click for more details" or something..unless that is what the title is..which I dont think so..? Link to comment Share on other sites More sharing options...
justsomeguy Posted October 9, 2008 Share Posted October 9, 2008 You can put the different pieces wherever you want them, I was just showing how to associate multiple pieces of information with the same thing. In my example each of the pieces goes to a different element.getElementById("i" + i)getElementById("t" + i)getElementById("l" + i) Link to comment Share on other sites More sharing options...
Spunky Posted October 9, 2008 Author Share Posted October 9, 2008 Ok, I tried the code, all the different images will show, but only in the first div tag, but they wont link even. I didnt change the images from what you used so as long as the http for those images works it should work for that reason...I still would like to know if what I originally asked was possible though, to have text under or above that is a hyperlink rather than the image itself...the image itself might be fine though.. Link to comment Share on other sites More sharing options...
Spunky Posted October 9, 2008 Author Share Posted October 9, 2008 Suppose I should show my code so you know what is wrong. <html><body><img id="i1"></img><img id="i2"></img><img id="i3"></img><script type="text/javascript">var theImages = [{ url: "http://w3schools.invisionzone.com/style_images/1/css_img_code.gif", title: "Image 1", link: "http://google.com"},{ url: "http://w3schools.invisionzone.com/style_images/1/p_up.gif", title: "Image 2", link: "http://slashdot.org"},{ url: "http://w3schools.invisionzone.com/style_images/1/p_mq_add.gif", title: "Image 3", link: "http://xkcd.com"}];var randomNumber;var previouslyUsedRandomNumbers = "";for(var i = 1; i <= 3; i++){ do { randomNumber = Math.floor(Math.random() * theImages.length); } while(previouslyUsedRandomNumbers.indexOf("|" + randomNumber + "|") >= 0); previouslyUsedRandomNumbers += "|" + randomNumber + "|"; document.getElementById("i" + i).src= theImages[randomNumber].url; document.getElementById("t" + i).innerHTML= theImages[randomNumber].title; document.getElementById("l" + i).href= theImages[randomNumber].link;}</script></body></html> My guess is I need to call the "t" and "l" ID but quite honestly I am not sure how to do that. Or where. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 9, 2008 Share Posted October 9, 2008 e.g.: <img id="i1"></img><a id="l1"><span id="t1"></span></a> Link to comment Share on other sites More sharing options...
Spunky Posted October 10, 2008 Author Share Posted October 10, 2008 OMG I love you! Thank you!!!!! :) Link to comment Share on other sites More sharing options...
Spunky Posted October 10, 2008 Author Share Posted October 10, 2008 Ok, the code worked...and then when I applied it to a already created thing in FrontPage starting out with only replacing the 3 images, links, and titles you gave me it also worked perfectly fine..it was exciting..and then I added the rest of the things I needed and it gives me an error....Here is the code, the line in red is line 57. <script type="text/javascript">var theImages = [{ url: "http://dawndause.com/images/crystal_rock_front_fh2.jpg", title: "3021 Crystal Rock Naperville, IL", link: "http://www.dawndause.com/crystal_rock.htm",[color="#FF0000"]},[/color]{ url: "http://dawndause.com/images/crescenzo_front_fh.jpg", title: "2617 Crescenzo Drive Joliet, IL", link: "http://www.dawndause.com/crescenzo.htm",},{ url: "http://dawndause.com/images/plaza_fronttemp.jpg", title: "903 Plaza Drive Joliet, IL", link: "http://www.dawndause.com/plaza.htm",},{ url: "http://dawndause.com/images/nevada_front_fh.jpg", title: "11 E Nevada Avenue Glendale Heights, IL", link: "http://www.dawndause.com/nevada.htm",},{ url: "http://dawndause.com/images/country_front_fh.jpg", title: "1117 Country Drive Shorewood, IL", link: "http://www.dawndause.com/country.htm",},{ url: "http://dawndause.com/images/fraser_front_fh.jpg", title: "24456 Fraser Road Plainfield, IL", link: "http://www.dawndause.com/fraser.htm",},{ url: "http://dawndause.com/images/chartwell_front_fh.jpg", title: "1208 Chartwell Trace Shorewood, IL", link: "http://www.dawndause.com/chartwell.htm",},( url: "http://dawndause.com/images/buckingham_front2_fh.jpg", title: "505 Buckingham Place Shorewood, IL", link: "http://www.dawndause.com/buckingham.htm",},{ url: "http://dawndause.com/images/park_river_front_fh.jpg", title: "24751 Park River Lane Shorewood, IL", link: "http://www.dawndause.com/park_river.htm",},{ url: "http://dawndause.com/images/arboretum_front_fh.jpg", title: "443 Arboretum Drive Lombard, IL", link: "http://www.dawndause.com/arboretum.htm",},{ url: "http://dawndause.com/images/apollo_front_fh.jpg", title: "417 Apollo Drive Joliet, IL", link: "http://www.dawndause.com/apollo.htm",}];var randomNumber;var previouslyUsedRandomNumbers = "";for(var i = 1; i <= 3; i++){ do { randomNumber = Math.floor(Math.random() * theImages.length); } while(previouslyUsedRandomNumbers.indexOf("|" + randomNumber + "|") >= 0); previouslyUsedRandomNumbers += "|" + randomNumber + "|"; document.getElementById("i" + i).src= theImages[randomNumber].url; document.getElementById("t" + i).innerHTML= theImages[randomNumber].title; document.getElementById("l" + i).href= theImages[randomNumber].link;}</script> When I try to run it here is the error:A Runtime Error has occurred.Do you wish to Debug?Line: 57Error: Expected identifier, string or numberI even copied the code into the normal Notepad thing I had been testing all the previous codings you all helped me with and it still did not work. I scanned through the code and I found some commas I had missed and some quotation marks..I fixed em..still a problem..why? I just can't figure it out, everything was going so smoothly... Link to comment Share on other sites More sharing options...
Spunky Posted October 10, 2008 Author Share Posted October 10, 2008 Nevermind. I found that I accidentally put a comma at the end of each of the "link:" line for the objects and though I was still having a problem I found that I accidentally placed a ")" rather than a"}" In FrontPage it is hard to tell the difference. Link to comment Share on other sites More sharing options...
Synook Posted October 10, 2008 Share Posted October 10, 2008 Solution: Don't use FrontPage Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.