JavaScript not executing text-box value in HTML

debugcn Published at Dev

arthrax

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

Zakaria Acharki

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

Collected from the Internet

Please contact [email protected] to delete if infringement.