Advanced Search

Results 1 to 5 of 5

Thread: New to javascript and need some help

  1. #1
    Join Date
    Dec 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default New to javascript and need some help

    Hi all,

    I am now writing a code for madlib. I have that part of the code done. I want the results of the madlib code to display in a second frame. More or less I want the user to put in their input on the right frame and when they click create story I want it to display in a textarea in the left frame. Here is the code for the mablib

    Code:
    <html>
    <head>
    <SCRIPT LANGUAGE = "JavaScript">
    function create(form) { 
    if (confirm("Are you sure?")) { 
    storyWin = document.getElementById("madlibresults"); 
    with (storyWin.document) { 
    writeln ("<P><b> One day while I was " + form.input1.value + " in the " + form.input2.value + " a " + form.input3.value + " " + form.input4.value + " fell through the roof. It immediately jumped on the " + form.input5.value + " and knocked over the </b>"); 
    writeln ("<b>" + form.input6.value + ". Then it ran out the door into the " + form.input7.value + " and " + form.input8.value + " a " + form.input9.value + " off the " + form.input10.value + ". </b>"); 
    writeln ("<b> It then knocked a glass of " + form.input11.value + " off the coffee table. After " + form.input12.value + " minutes of chasing the " + form.input4.value + " through the house I finally caught it and put it outside. It quickly climbed the nearest " + form.input13.value + ".</b>"); 
    writeln ("<BR>"); 
    } 
    }
    }
    </SCRIPT>
    </head>
    
    <BODY>
    
    <CENTER>
    <FORM>
    <TABLE BORDER = 1 CELLPADDING = 0>
    <TR><TD>
    <b>Verb:</b>
    <TD><INPUT TYPE="text" NAME="input1" size=45><BR>
    </TD></TR><TR><TD>
    <b>Room in a House:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input2" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Adjective:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input3" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Noun:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input4" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Piece of Furniture:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input5" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Noun:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input6" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Room in a House:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input7" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Verb:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input8" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Noun:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input9" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Piece of Furniture:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input10" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>A Liquid:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input11" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Number:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input12" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Noun:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input13" size=45 >
    </TD>
    </TR>
    <TR>
    <TD>
    </TD>
    </TR>
    </TABLE>
    <BR></B>
    <INPUT TYPE = "button" VALUE="Create Story" onClick = "create(this.form)">
    </FORM>
    </CENTER>
    <html>
    Here is the code for the results page. I am not sure what else I need to add to this to make it all work. I want the results to display in the window without the user having to scroll.

    Code:
    <html>
    <body>
    <CENTER>
    <textarea style="border=0; overflow=auto;" name=msg rows="30"cols="50">
    </body>
    </html>
    Any and all help is welcome and I would be very thankful for any offered.

    Thank you

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    This might be better (all on one page):

    Code:
    <html>
    <head>
    <SCRIPT LANGUAGE = "JavaScript">
    function create(form) { 
    if (confirm("Are you sure?")) { 
    var storyWin = document.getElementById("madlibresults"); 
    var sHTML="<P><b> One day while I was " + form.input1.value + " in the " + form.input2.value + " a " + form.input3.value + " " + form.input4.value + " fell through the roof. It immediately jumped on the " + form.input5.value + " and knocked over the </b>";
    sHTML+="<b>" + form.input6.value + ". Then it ran out the door into the " + form.input7.value + " and " + form.input8.value + " a " + form.input9.value + " off the " + form.input10.value + ". </b>";
    sHTML+="<b> It then knocked a glass of " + form.input11.value + " off the coffee table. After " + form.input12.value + " minutes of chasing the " + form.input4.value + " through the house I finally caught it and put it outside. It quickly climbed the nearest " + form.input13.value + ".</b>";
    sHTML+="<BR>";
    storyWin.innerHTML=sHTML;
    }
    }
    </SCRIPT>
    </head>
    
    <BODY>
    
    <table width="100%">
    <tr>
    <td width="49%"><CENTER>
    <FORM>
    <TABLE BORDER = 1 CELLPADDING = 0>
    <TR><TD>
    <b>Verb:</b>
    <TD><INPUT TYPE="text" NAME="input1" size=45><BR>
    </TD></TR><TR><TD>
    <b>Room in a House:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input2" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Adjective:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input3" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Noun:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input4" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Piece of Furniture:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input5" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Noun:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input6" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Room in a House:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input7" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Verb:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input8" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Noun:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input9" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Piece of Furniture:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input10" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>A Liquid:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input11" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Number:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input12" size=45 ><BR>
    </TD></TR><TR><TD>
    <b>Noun:</b>
    </TD><TD>
    <INPUT TYPE="text" NAME="input13" size=45 >
    </TD>
    </TR>
    <TR>
    <TD>
    </TD>
    </TR>
    </TABLE>
    <BR></B>
    <INPUT TYPE = "button" VALUE="Create Story" onClick = "create(this.form)">
    </FORM>
    </CENTER></td><td id="madlibresults" width="49%" style="padding:0 6em 0 0;"></td>
             </tr>
             </table>
             
    <html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    language is depreciated use type instead:
    Code:
       <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <script type="text/javascript">
    function create(form) { 
    if (confirm("Are you sure?")) { 
    var storyWin = document.getElementById("madlibresults"); 
    var sHTML="<P><b> One day while I was " + form.input1.value + " in the " + form.input2.value + " a " + form.input3.value + " " + form.input4.value + " fell through the roof. It immediately jumped on the " + form.input5.value + " and knocked over the <\/b>";
    sHTML+="<b>" + form.input6.value + ". Then it ran out the door into the " + form.input7.value + " and " + form.input8.value + " a " + form.input9.value + " off the " + form.input10.value + ". <\/b>";
    sHTML+="<b> It then knocked a glass of " + form.input11.value + " off the coffee table. After " + form.input12.value + " minutes of chasing the " + form.input4.value + " through the house I finally caught it and put it outside. It quickly climbed the nearest " + form.input13.value + ".<\/b>";
    sHTML+="<BR>";
    storyWin.innerHTML=sHTML;
    }
    }
    </script>
    <title></title>
    
    <style type="text/css">
     td.c2 {padding:0 6em 0 0;}
     div.c1 {text-align: center}
    </style>
    </head>
    <body>
    <table width="100%">
    <tr>
    <td width="49%">
    <div class="c1">
    <form>
    <table border="1" cellpadding="0">
    <tr>
    <td><strong>Verb:</strong></td>
    <td><input type="text" name="input1" size="45"><br></td>
    </tr>
    <tr>
    <td><strong>Room in a House:</strong></td>
    <td><input type="text" name="input2" size="45"><br></td>
    </tr>
    <tr>
    <td><strong>Adjective:</strong></td>
    <td><input type="text" name="input3" size="45"><br></td>
    </tr>
    <tr>
    <td><strong>Noun:</strong></td>
    <td><input type="text" name="input4" size="45"><br></td>
    </tr>
    <tr>
    <td><strong>Piece of Furniture:</strong></td>
    <td><input type="text" name="input5" size="45"><br></td>
    </tr>
    <tr>
    <td><strong>Noun:</strong></td>
    <td><input type="text" name="input6" size="45"><br></td>
    </tr>
    <tr>
    <td><strong>Room in a House:</strong></td>
    <td><input type="text" name="input7" size="45"><br></td>
    </tr>
    <tr>
    <td><strong>Verb:</strong></td>
    <td><input type="text" name="input8" size="45"><br></td>
    </tr>
    <tr>
    <td><strong>Noun:</strong></td>
    <td><input type="text" name="input9" size="45"><br></td>
    </tr>
    <tr>
    <td><strong>Piece of Furniture:</strong></td>
    <td><input type="text" name="input10" size="45"><br></td>
    </tr>
    <tr>
    <td><strong>A Liquid:</strong></td>
    <td><input type="text" name="input11" size="45"><br></td>
    </tr>
    <tr>
    <td><strong>Number:</strong></td>
    <td><input type="text" name="input12" size="45"><br></td>
    </tr>
    <tr>
    <td><strong>Noun:</strong></td>
    <td><input type="text" name="input13" size="45"></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    </table>
    <br>
    <input type="button" value="Create Story" onclick="create(this.form)"></form>
    </div>
    </td>
    <td id="madlibresults" width="49%" class="c2"></td>
    </tr>
    </table>
    </body>
    </html>
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  4. #4
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How could you send the input results to a random story

    I'd like to do this on my classroom website, except I like to have the possibility of randomly returning one of several stories (that students would create). How could I modify the script below to achieve that?

    PHP Code:
    <SCRIPT LANGUAGE "JavaScript">
    function 
    create(form) { 
    if (
    confirm("Are you sure?")) { 
    storyWin document.getElementById("madlibresults"); 
    with (storyWin.document) { 
    writeln ("<P><b> One day while I was " form.input1.value " in the " form.input2.value " a " form.input3.value " " form.input4.value " fell through the roof. It immediately jumped on the " form.input5.value " and knocked over the </b>"); 
    writeln ("<b>" form.input6.value ". Then it ran out the door into the " form.input7.value " and " form.input8.value " a " form.input9.value " off the " form.input10.value ". </b>"); 
    writeln ("<b> It then knocked a glass of " form.input11.value " off the coffee table. After " form.input12.value " minutes of chasing the " form.input4.value " through the house I finally caught it and put it outside. It quickly climbed the nearest " form.input13.value ".</b>"); 
    writeln ("<BR>"); 

    }
    }
    </SCRIPT> 
    Thanks,
    Dale

  5. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    http://dynamicdrive.com/forums/showp...postcount=1337 — 1.1, 1.2, 1.4, 3.1, 3.2, 5.1, 5.2, 5.3, 5.4, 5.5. In addition, use of the 'with' statement is heavily frowned upon in ECMAScript, since it alters the current namespace unpredictably.

    Code:
    <!DOCTYPE html "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <title>MadLibs!</title>
        <style type="text/css">
          * {
            margin: 0;
            padding: 0;
          }
    
          body {
            background-color: white;
            color: black;
            font-family: sans-serif;
            margin: 0.5em;
            padding: 0.5em;
          }
    
          .madlibs label {
            font-size: 60%;
            color: red;
          }
    
          .madlibs input {
            border: 0 none;
            font-family: sans-serif;
            color: #555;
            text-align: center;
            border-bottom: 1px dotted #888;
            width: 7em;
          }
    
          .madlibs label input {
            font-size: 166%;
          }
    
          .madlibs .submit {
            border: 0 none;
            color: blue;
            background-color: white;
            text-decoration: underline;
            cursor: pointer;
          }
        </style>
        <script type="text/javascript">
          var Functional = {
            map: function(f, a) {
              for (var i = a.length - 1, r = []; i >= 0; --i)
                r[i] = f(a[i], i);
    
              return r;
            },
    
            filter: function(f, a) {
              if (typeof f === "string")
                f = (function(f) { return function(a) { return !!a[f]; }; })(f);
    
              for (var i = 0, r; i < a.length; ++i)
                if (f(a[i]))
                  r.push(a[i]);
    
              return r;
            },
    
            reduce: function(f, a, t) {
              if (!a.length)
                return t;
    
              t = t || a[0];
    
              for (var i = 0, n = a.length; i < n; ++i)
                t = f(t, a[i]);
    
              return t;
            }
          };
    
          var Form = (function(F) {
            function getValue(inp, comb) {
              if (typeof inp.value !== undefined)
                return inp.value;
    
              if (inp.tagName.toLowerCase() === "select")
                return inp.options[inp.selectedIndex].value;
    
              return F.reduce(comb || function(a, b) { return a.value + b.value }, F.filter("checked", inp)) || "";
            }
    
            function freeze(form) {
              F.map(function(el) {
                if (el.type && el.type.toLowerCase() === "submit")
                  el.parentNode.removeChild(el);
                else {
                  var nel  = document.createElement("span"),
                      rmel = el.parentNode.tagName.toLowerCase() === "label" ? el.parentNode : el;
    
                  nel.appendChild(document.createTextNode(getValue(el))).parentNode.className = "frozen-input";
    
                  rmel.parentNode.replaceChild(nel, rmel);
                }
    
                var form = el = nel = null;
              }, form.elements);
    
              return form;
            }
    
            return {freeze: freeze};
          })(Functional);
        </script>
      </head>
      <body>
        <form class="madlibs" action="/server/side/equivalent" method="post" onsubmit="Form.freeze(this); return false;">
          <div>
            <p>One day, while I was <input type="text"> in the <input type="text"> a <input type="text"> <input type="text"> fell through the roof.  It immediately jumped on the <input type="text"> and knocked over the <input type="text">.  Then it ran out of the door and into the <input type="text"> and <input type="text"> a <input type="text"> off the <input type="text">.  It then knocked a glass of <input type="text"> off the coffee table. After <input type="text"> minutes of chasing the <input type="text"> through the house I finally caught it and put it outside.  It quickly climbed the nearest <input type="text">.
            </p>
    
            <input class="submit" type="submit" value="Freeze">
          </div>
        </form>
      </body>
    </html>
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franais | entiendo espaol | ti t hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

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