JS random word generator

Foster

05-21-2012, 08: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">

</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, 09: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  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, 10: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, 10:25 AM

Thanks that works perfectly Coothead.

coothead

05-21-2012, 10:29 AM

No problem, you're very welcome. ;)
coothead

Foster

05-21-2012, 10:32 AM

Just need to put the words needed in and make it look pretty.