Hi guy I was wondering how I would overwrite something written on my form using variables

ie. my limerick is
There was a fat butcher called Bill
Who cooked more than he wanted to kill
One day he sat down
And said with a frown
That his eating was more than a thrill.

so how would I use a drop down box and click skinny so that fat would change to skinny in the first line

heres my code

<HTML>
<HEAD>
<TITLE>Limerick Generator</TITLE>
<script type ="text/javascript">
           function display(f) 
           {
            var DirectionSelect = document.getElementById('Direction');
            var Direction = DirectionSelect.options[DirectionSelect.selectedIndex].text

            var VerbSelect = document.getElementById('Verb');
            var Verb = VerbSelect.options[VerbSelect.selectedIndex].text

            var ExpressionSelect = document.getElementById('Expression');
            var Expression = ExpressionSelect.options[ExpressionSelect.selectedIndex].text

            for (var i=0; i < document.LimGenerator.bodytype.length; i++)
            {
            if (document.LimGenerator.bodytype[i].value;
            }
            }

                var element = document.getElementById = ("LimerickOutput");
                element.innerHTML = ("There was a " + (f.body.value) + " " + (f.occupation.value) + " called " + (f.character.value) + " who " + (f.task.value) + 
                " more than he wanted to " +  (f.characterrhyme.value) + " one day he " + (f.verb.value) + " " + (f.direction.value) + " and said with (a) " + 
                (f.directionrhyme.value) + " that eating was more than a " + (f.characterrhyme.value));          

</script>

</HEAD>
<BODY BGCOLOR="moccasin" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000">
<CENTER><H2>Limerick Generator</H2></CENTER>
<FORM NAME="Limerick Generator">
<TABLE BORDER=0 WIDTH=50%>
<TR>
  <TD WIDTH=25%>
            <B>Question</B>
  </TD>
  <TD WIDTH=25% >
            <B> Answer </B>
  </TD>
</TR>

<tr>
<td> Name of your character </td><td><select id='character'>
    <option>Please Choose</option>
    <option>Bill</option>
    <option>Will</option>
    <option>Jill</option>
    <option>Gill</option>
</select><br /></td></tr>

<td> Please choose a body type </td><td><select id='body'>
    <option>Please Choose</option>
    <option>Thin</option>
    <option>Fat</option>
    <option>Tall</option>
    <option>Short</option>
</select><br /></td></tr>

<td> Two words that rhyme with your character's name </td><td><select  id='characterrhyme'>
    <option>Please Choose</option>
    <option>Kill</option>
    <option>Spill</option>
    <option>Thrill</option>
</select><br /></td></tr> 

<td> Name your characters occupation </td><td><select id='occupation'>
    <option>Please Choose</option>
    <option>Butcher</option>
    <option>Baker</option>
    <option>Cleaner</option>
</select><br /></td></tr>

<td> What is the past tense of a task your character might do at work </td><td><select id='task'>
    <option>Please Choose</option>
    <option>Chopped</option>
    <option>Cooked</option>
    <option>Cleaned</option>
</select><br /></td></tr>

<td> Pick a past tense verb </td><td><select id='verb'>
    <option>Please Choose</option>
    <option>Sat</option>
    <option>Jumped</option>
    <option>Hopped</option>
</select><br /></td></tr>

<td> Pick a direction </td><td><select id='direction'>
    <option>Please Choose</option>
    <option>Right</option>
    <option>Back</option>
</select><br /></td></tr>

<td> Pick a word that rhymes with your direction </td><td><select id='directionrhyme'>
    <option>Please Choose</option>
    <option>Delight</option>
    <option>Contrite</option>
    <option>Quack</option>
    <option>Clack</option>
</select><br /></td></tr>

<td> Please pick a gender. </td>

<td> 

<INPUT TYPE=RADIO NAME="gender" VALUE="M">male<BR>
<INPUT TYPE=RADIO NAME="gender" VALUE="F">female<BR>

</td>


<TR>
  <TD colspan=3>
            <INPUT TYPE="button" VALUE="Press" 
            onClick="display(this.form)">
            <INPUT TYPE="reset" VALUE="Reset"
            onMouseOver="window.status='Clears the form' "
            onMouseOut="window.status='Limerick Generator' ">
  </TD>

<td><h2>The generated Limerick</h2></td>  
<td><h3 <id="LimerickOutput">
There was a fat butcher called Bill
Who cooked more than he wanted to kill
One day he sat down
And said with a frown
That his eating was more than a thrill.
</h3></td>


</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Recommended Answers

All 3 Replies

First of all correct line from line 122-128.<h3> must be used.And instead of just id add any tag like div or span.For now i have taken as div.

<td><h3> <div id="LimerickOutput">
There was a fat butcher called Bill
Who cooked more than he wanted to kill
One day he sat down
And said with a frown
That his eating was more than a thrill.</div>
</h3></td>

Now if you want to do this on click of Press button,then in that case,in your javascript method use replace method and change its value.

For eg:-

var str=document.getElementById("LimerickOutput").value;
var n=str.replace("fat",document.getElementById("characterrhyme").value);
document.getElementById("LimerickOutput").value=n;

Sorry I'm kinda brain dead rite now...

What would the code look like in my script area

So I still cant get this to work :/ its probably me doing something wrong so can someone walk me through this

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.