Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Complete newbie needs help with random generator

    Hi all. I have no skill in JavaScript but some basic knowledge of HTML. What I want to create is 3 random word generators that each work separately and pull words from a pre set list. The idea is to have a starter, main and desert. I have seen this http://www.mcfedries.com/javascript/randomwords.asp which is perfect but have had several attempts to follow the guide to insert it into HTML. Have copied source code but honestly i don't have a clue.

    Ideally each generator would be on a separate line with the titles as above them I would just input the words and could change them over time. I can see this being used at our college for many different educational uses. If anyone could help I would gladly cite them when we put the tool live

    Please please help! Your my only hope!
    Thanks
    Rods
    Last edited by rosscothep; 03-03-2013 at 05:56 PM. Reason: resolved

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,899
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Use this, change the values in the array to the words required, repeat twice to get three different menus.

    Code:
    <script type = "text/javascript">
    
    //return the member at a random index of the array
    var myarray=["red","blue", "yellow", "orange","green"];
    var col = (myarray[Math.floor(Math.random()*myarray.length)]);
    alert (col);
    
    </script>

    alerts are obsolete and are used only for testing purposes. You should use .innerHTML to display the three courses on seqential lines.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cool. This sounds a bit simpler to implement. Thanks for taking time to read and reply. After reading the post guidelines i was worried that no-one would bother. My main issue is how to put this into a page. I have a blog and want to insert it into a page on the blog. It requires pasting HTML code. So i need to put this script into the code. I am so unfamiliar with anything other than some basic HTML formatting.

    Thanks
    Ross

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,899
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Try this (naturally you can change/add to the menu items):-


    Code:
    <html> 
    <head> 
    </head>
    <body>
    
    Starter:-  <span id = "starter"></span>
    <br>
    Main Course:- <span id = "main"></span>
    <br>
    Dessert:- <span id = "dessert"></span>
    
    <script type = "text/javascript">
    
    var myarray1 = ["Quails eggs", "Mushroom Soup", "Prawn Cocktail", "Oysters In Soy Sauce","Thai Fish Cakes With Cucumber"];  // No comma after the last item!!
    var course1 = (myarray1[Math.floor(Math.random()*myarray1.length)]);
    document.getElementById("starter").innerHTML = course1;
    
    var myarray2 = ["Horse and Chips","Beef Wellington", "Curried Donkey Testicles", "Roasted Goat","Three Cheese Pizza"];
    var course2 = (myarray2[Math.floor(Math.random()*myarray2.length)]);
    document.getElementById("main").innerHTML = course2;
    
    var myarray3 = ["Strawberry-Rhubarb Pie","Ice Cream Sundae", "Tropical Tiramisu", "Raspberry Syllabub","Treacle Pudding"];
    var course3 = (myarray3[Math.floor(Math.random()*myarray3.length)]);
    document.getElementById("dessert").innerHTML = course3;
    
    </script>
    
    </body>
    </html>

    I think you want a dessert, not a desert!
    Last edited by Philip M; 03-03-2013 at 12:29 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Fantastic. Your correct Dessert! Ok now the final plead of ignorance. I copied this code to text edit on my Mac and saved as a .html file. Now im using Chrome and when i open it in Chrome it just shows code and no formatting. As i said my knowledge is very poor. Is this something to do with Chrome or have i not saved it correcty? I read somewhere about script support but im sure Chrome has this. Give me iWeb or online WYSIWYG and im away!

    Again thanks for taking the time here. When i get it sorted i would be happy to credit your assistance.

    Thanks

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,899
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Save the code I gave you as an .html file. Then run it in any browser.

    When I run it in Chrome I get

    Starter:- Oysters In Soy Sauce
    Main Course:- Three Cheese Pizza
    Dessert:- Raspberry Syllabub

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok. This is Bizzare. Did that in two different programs but still only showed the code still. Tried pasting onto blog and works a treat. Im so confused right now why that has happened. Code is good! Thanks alot. Is it easy to add a button to generate all threee at the same time rather than page refresh?

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,899
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by rosscothep View Post
    Ok. This is Bizzare. Did that in two different programs but still only showed the code still. Tried pasting onto blog and works a treat. Im so confused right now why that has happened. Code is good! Thanks alot. Is it easy to add a button to generate all threee at the same time rather than page refresh?
    Yes, it is very easy. So easy that you ought really to learn a little Javascript so you can do it yourself.

    Code:
    <html> 
    <head> 
    </head>
    <body>
    
    <input type = "button" value = "Generate Menu" onclick = "generate()">
    <br><br>
    Starter:-  <span id = "starter"></span>
    <br>
    Main Course:- <span id = "main"></span>
    <br>
    Dessert:- <span id = "dessert"></span>
    
    <script type = "text/javascript">
    
    function generate() {
    var myarray1 = ["Quails eggs", "Mushroom Soup", "Prawn Cocktail", "Oysters In Soy Sauce","Thai Fish Cakes With Cucumber"];
    var course1 = (myarray1[Math.floor(Math.random()*myarray1.length)]);
    document.getElementById("starter").innerHTML = course1;
    
    var myarray2 = ["Horse and Chips","Beef Wellington", "Curried Donkey Testicles", "Roasted Goat","Three Cheese Pizza"];
    var course2 = (myarray2[Math.floor(Math.random()*myarray2.length)]);
    document.getElementById("main").innerHTML = course2;
    
    var myarray3 = ["Strawberry-Rhubarb Pie","Ice Cream Sundae", "Tropical Tiramisu", "Raspberry Syllabub","Treacle Pudding"];
    var course3 = (myarray3[Math.floor(Math.random()*myarray3.length)]);
    document.getElementById("dessert").innerHTML = course3;
    }
    
    </script>
    
    </body>
    </html>
    The more menu items you have the less the chance that the same one will be generated twice in succession.
    Last edited by Philip M; 03-03-2013 at 12:11 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Dude your the best. Ive sussed how to add another buttonn at the bottom to link to a new page. slow progress!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •