PDA

View Full Version : New to javascript and need some help



Lexilou
02-15-2008, 08:42 PM
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



<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.



<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

jscheuer1
02-16-2008, 02:27 AM
This might be better (all on one page):


<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>

Master_script_maker
02-16-2008, 11:07 PM
language is depreciated use type instead:
<!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>

Mystre
08-27-2008, 08:59 PM
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?



<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

Twey
08-28-2008, 12:39 AM
http://dynamicdrive.com/forums/showpost.php?p=158839&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.


<!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>