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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    250
    Thanks
    8
    Thanked 4 Times in 4 Posts

    JS random word generator

    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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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.

    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
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there Foster,

    you could try it like this, maybe...
    Code:
    <!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

  • Users who have thanked coothead for this post:

    Foster (05-21-2012)

  • #4
    Regular Coder
    Join Date
    Nov 2011
    Posts
    250
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Thanks that works perfectly Coothead.

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    No problem, you're very welcome.
    coothead

  • #6
    Regular Coder
    Join Date
    Nov 2011
    Posts
    250
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Just need to put the words needed in and make it look pretty.


  •  

    Posting Permissions

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