Resolved Complete newbie needs help with random generator

rosscothep · 03-03-2013, 06:17 AM

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

Philip M · 03-03-2013, 10:53 AM

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.

rosscothep · 03-03-2013, 11:00 AM

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

Philip M · 03-03-2013, 11:12 AM

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!

rosscothep · 03-03-2013, 11:21 AM

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

Philip M · 03-03-2013, 11:28 AM

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

rosscothep · 03-03-2013, 11:53 AM

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?

Philip M · 03-03-2013, 12:09 PM

Quote:

Originally Posted by rosscothep

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.

rosscothep · 03-03-2013, 05:55 PM

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