...

View Full Version : JS random word generator



Foster
05-21-2012, 09:32 AM
Hey guys.

It's been a while since I was last here but I'm having a few problems. I'm building a random word generator form for a friend but my knowledge of JS is limited. I have found a script to randomly generate a word at the click of a button.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Use the following variable to specify
// the number of random words
var NumberOfWords = 28

var words = new BuildArray(NumberOfWords)

// Use the following variables to
// define your random words:
words[1] = "czarevitch"
words[2] = "brightwork"
words[3] = "verkrampte"
words[4] = "protectrix"
words[5] = "nudibranch"
words[6] = "grandchild"
words[7] = "newfangled"
words[8] = "flugelhorn"
words[9] = "mythologer"
words[10] = "pluperfect"
words[11] = "jellygraph"
words[12] = "quickthorn"
words[13] = "rottweiler"
words[14] = "technician"
words[15] = "cowpuncher"
words[16] = "middlebrow"
words[17] = "jackhammer"
words[18] = "triphthong"
words[19] = "wunderkind"
words[20] = "dazzlement"
words[21] = "jabberwock"
words[22] = "witchcraft"
words[23] = "pawnbroker"
words[24] = "thumbprint"
words[25] = "motorcycle"
words[26] = "cryptogram"
words[27] = "torchlight"
words[28] = "bankruptcy"

function BuildArray(size){
this.length = size
for (var i = 1; i <= size; i++){
this[i] = null}
return this
}

function PickRandomWord(frm) {
// Generate a random number between 1 and NumberOfWords
var rnd = Math.ceil(Math.random() * NumberOfWords)

// Display the word inside the text box
frm.WordBox.value = words[rnd]
}
//-->
</SCRIPT>
</head>


<body>

<FORM NAME="WordForm">
<INPUT TYPE=TEXT SIZE=10 NAME="WordBox"><BR>
<INPUT TYPE=BUTTON VALUE="Click Here to Get a Random Word" onClick="PickRandomWord(document.WordForm);" >
<input TYPE="reset" VALUE="CLEAR" onClick="clearForm(this.form)">
</FORM>
</body>
</html>


This works without problems, however by friend wants to be able to fill multiple boxes with words from different lists by clicking only 1 button. The script above will allow me to do separate boxes with their own buttons. If anyone can help it would be greatly appreciated.

Foster

Philip M
05-21-2012, 10:35 AM
Just add more event handlers to the single button

onClick="PickRandomWord1(document.WordForm); PickRandomWord2(document.WordForm); PickRandomWord3(document.WordForm);"

<script language=javascript> is long deprecated. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9).
The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.


Quizmaster: The Italian company Gaggia manufactures machines for making what drink?
Contestant: Whisky.

coothead
05-21-2012, 11:00 AM
Hi there Foster,

you could try it like this, maybe...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
form {
float:left;
padding:20px 20px 10px;
border:1px solid #999;
}
label {
float:left;
width:100px;
line-height:22px;
margin-bottom:10px;
font-size:12px;
}
input {
margin-bottom:10px;
}
</style>

<script type="text/javascript">

function init(){

words0=['a','b','c','d'];
words1=['e','f','g','h','i','j','k','l'];
words2=['m','n','o','p','q','r','s','t','u','v','w','x','y','z'];

df=document.forms[0];
df.reset();

df[3].onclick=function() {

rnd0=Math.floor(Math.random()*words0.length);
rnd1=Math.floor(Math.random()*words1.length);
rnd2=Math.floor(Math.random()*words2.length);

df[0].value=words0[rnd0];
df[1].value=words1[rnd1];
df[2].value=words2[rnd2];
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);

</script>

</head>
<body>

<form action="#">
<div>

<label>word one:</label><input type="text" readonly="readonly"><br>
<label>word two:</label><input type="text" readonly="readonly"><br>
<label>word three:</label><input type="text" readonly="readonly"><br>

<input type="button" value="Click here to get random words">
<input type="reset" value="Clear">

</div>
</form>

</body>
</html>

coothead

Foster
05-21-2012, 11:25 AM
Thanks that works perfectly Coothead.

coothead
05-21-2012, 11:29 AM
No problem, you're very welcome. ;)
coothead

Foster
05-21-2012, 11:32 AM
Just need to put the words needed in and make it look pretty.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum