JavaScript not executing text-box value in HTML

Question

I am new to JavaScript in HTML and was given the project to write a Mad Lib form using JS. I coded it and reviewed it many times, but I couldn't find the problem with the code: the program is not changing the text box value in the HTML document. Can you please help? Code:

 function madLib() { var name, object, objectTwo, adjective, adverb, verb, place, mood, buildingStructure; name = document.MadLibForm.name.value; object = document.MadLibForm.object.value; objectTwo = document.MadLibForm.objectwo.value; adjective = document.MadLibForm.adjective.value; adverb = document.MadLibForm.adverb.value; verb = document.MadLibForm.verb.value; place = document.MadLibForm.place.value; mood = document.MadLibForm.mood.value; buildingStructure = name + " went to PLACE after a long time. " + name + " loved " + place + " because it was his/her favorite place when she was a kid. " + name + " took the " + adjective + " " + obeject + " with him to the " + place + ", which he/she used to it " + adverb + verb + ". He/She also took " + objectTwo + " with him/her, but did not use it at all during the visit. Still, at the end of the visit, he/she was very " + mood + " ."; document.MadLibForm.displayFullMadLib.value = buildingStructure; }

 <!DOCTYPE html> <head> <title>Mad Libs</title> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css" type="text/css"> <script> function madLib() { var name, object, objectTwo, adjective, adverb, verb, place, mood, buildingStructure; name = document.MadLibForm.name.value; object = document.MadLibForm.object.value; objectTwo = document.MadLibForm.objectwo.value; adjective = document.MadLibForm.adjective.value; adverb = document.MadLibForm.adverb.value; verb = document.MadLibForm.verb.value; place = document.MadLibForm.place.value; mood = document.MadLibForm.mood.value; buildingStructure = name + " went to PLACE after a long time. " + name + " loved " + place + " because it was his/her favorite place when she was a kid. " + name + " took the " + adjective + " " + obeject + " with him to the " + place + ", which he/she used to it " + adverb + verb + ". He/She also took " + objectTwo + " with him/her, but did not use it at all during the visit. Still, at the end of the visit, he/she was very " + mood + " ."; document.MadLibForm.displayFullMadLib.value = buildingStructure; } </script> </head> <body> <div id="main"> <form name="MadLibForm"> <table> <tr> <th colspan="2">wEiRd Mad Lib</th> </tr> <tr> <td>Your Name</td> <td> <input type="text" name="name" class="inputs"> </td> </tr> <tr> <td>Object</td> <td> <input type="text" name="object" class="inputs"> </td> </tr> <tr> <td>Another Object</td> <td> <input type="text" name="objecttwo" class="inputs"> </td> </tr> <tr> <td>Place</td> <td> <input type="text" name="place" class="inputs"> </td> </tr> <tr> <td>Verb</td> <td> <input type="text" name="verb" class="inputs"> </td> </tr> <tr> <td>Adjective</td> <td> <input type="text" name="adjective" class="inputs"> </td> </tr> <tr> <td>Adverb</td> <td> <input type="text" name="adverb" class="inputs"> </td> </tr> <tr> <td>Mood</td> <td> <input type="text" name="mood" class="inputs"> </td> </tr> <tr> <td> <div> <input type="button" onClick="madLib()" value="Get Your Story!" id="button"> </div> </td> </tr> <tr> <td colspan="2">&nbsp; <textarea name="displayFullMadLib" rows="9" cols="65"></textarea> </td> </tr> </table> </form> </div> <!--main--> </body> </html>

Thank you so much :)

Answer 1

Your updated fiddle working fine after two changes.

Change :

 objectTwo = document.MadLibForm.objectwo.value;

To :

 objectTwo = document.MadLibForm.objecttwo.value; //two `t`

Replace obeject by object in :

 ..." took the " + adjective + " " + object + " with him to the " + place ...+

JS :

madLib = function() {
      var name, object, objectTwo, adjective, adverb, verb, place, mood, buildingStructure;
      name = document.MadLibForm.name.value;
      object = document.MadLibForm.object.value;
      objectTwo = document.MadLibForm.objecttwo.value;
      adjective = document.MadLibForm.adjective.value;
      adverb = document.MadLibForm.adverb.value;
      verb = document.MadLibForm.verb.value;
      place = document.MadLibForm.place.value;
      mood = document.MadLibForm.mood.value;

      buildingStructure = name + " went to PLACE after a long time. " + name + " loved " + place + " because it was his/her favorite place when she was a kid. " + name + " took the " + adjective + " " + object + " with him to the " + place + ", which he/she used to it " + adverb + verb + ". He/She also took " + objectTwo + " with him/her, but did not use it at all during the visit. Still, at the end of the visit, he/she was very " + mood + " .";

      document.MadLibForm.displayFullMadLib.value = buildingStructure;
}

Answer 2

Typo:

objectTwo = document.MadLibForm.objectwo.value;

Should be

objectTwo = document.MadLibForm.objecttwo.value;

Note the two "t"s.

JavaScript not executing text-box value in HTML

Question

2 answers

solution1
1 ACCPTED 2015-09-02 22:14:22

solution2
0 2015-09-02 22:14:21

JavaScript not executing text-box value in HTML

Question

2 answers

solution1 1 ACCPTED 2015-09-02 22:14:22

solution2 0 2015-09-02 22:14:21

solution1
1 ACCPTED 2015-09-02 22:14:22

solution2
0 2015-09-02 22:14:21