CSS Codes
CSS Layouts
Results 1 to 5 of 5

Thread: New to javascript and need some help

  1. 02-15-2008, 08:42 PM #1
    Lexilou
    Lexilou is offline New Comer (less than 5 posts)
    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
    Reply With Quote Reply With Quote
  2. 02-16-2008, 02:27 AM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 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
    Reply With Quote Reply With Quote
  3. 02-16-2008, 11:07 PM #3
    Master_script_maker
    Master_script_maker is offline Senior Coders
    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.
    Reply With Quote Reply With Quote
  4. 08-27-2008, 08:59 PM #4
    Mystre
    Mystre is offline New Comer (less than 5 posts)
    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
    Reply With Quote Reply With Quote
  5. 08-28-2008, 12:39 AM #5
    Twey's Avatar
    Twey
    Twey is offline Modtoreador
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    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 français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules