Mad Libs in JavaScript - Dom Event

Question

I'm not sure what I'm doing wrong. I'm taking 3 inputs: noun, adjective, and person. I keep getting: "Generated story: I took my cat and play it. [object HTMLInputElement] didn't like it." I'm using the name var with value, the same as I did in the other lines\pbjects.

What am I missing?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Challenge: Mad Libs</title>
  </head>
  <body>
    <h1>Mad Libs</h1>

    <ul>
      <li>Noun: <input type="text" id="noun" /></li>
      <li>Adjective: <input type="text" id="adjective" /></li>
      <li>Someone's Name: <input type="text" id="person" /></li>
    </ul>

    <button id="lib-button">Lib it!</button>

    <p>Generated story: <span id="story"></span></p>

    <script>
      var libButton = document.getElementById("lib-button");
      var libIt = function() {
        var storyDiv = document.getElementById("story");
        var noun = document.getElementById("noun").value;
        var adjective = document.getElementById("adjective").value;
        var name = document.getElementById("person").value;
        storyDiv.innerHTML =
          "I took my " +
          noun +
          " and " +
          adjective +
          " it. " +
          person +
          " didn't like it.";
      };
      libButton.addEventListener("click", libIt);
    </script>
  </body>
</html>

score 0 · Answer 1 · answered Jan 15 '19 at 21:36

The variable is name but you used person so it is finding an element with the id person since their is no variable person.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Challenge: Mad Libs</title>
 </head>
 <body>
 
    <h1>Mad Libs</h1>
     
    <ul>
      <li>Noun: <input type="text" id="noun"></li>
      <li>Adjective: <input type="text" id="adjective"></li>
      <li>Someone's Name: <input type="text" id="person"></li>
    </ul>
     
    <button id="lib-button">Lib it!</button>
      
    <p>Generated story: 
    <span id="story"></span>
    </p>
 
    <script>
        var libButton = document.getElementById('lib-button');
        var libIt = function() {
            var storyDiv = document.getElementById("story");
            var noun = document.getElementById("noun").value;
            var adjective = document.getElementById("adjective").value;
            var name = document.getElementById("person").value;
            storyDiv.innerHTML = "I took my " + noun + " and " + 
              adjective + " it. "+ name + " didn't like it.";
        };
        libButton.addEventListener('click', libIt);
        
    </script>
  
 </body>
</html>

score 0 · Answer 2 · answered Sep 16 '21 at 07:34

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Challenge: Mad Libs</title>
  </head>
  <body>
    <h1>Mad Libs</h1>

    <ul>
      <li>Noun: <input type="text" id="noun" /></li>
      <li>Adjective: <input type="text" id="adjective" /></li>
      <li>Someone's Name: <input type="text" id="person" /></li>
    </ul>

    <button id="lib-button">Lib it!</button>

    <p>Generated story: <span id="story"></span></p>

    <script>
      var libButton = document.getElementById("lib-button");
      var libIt = function() {
        var storyDiv = document.getElementById("story");
        var noun = document.getElementById("noun").value;
        var adjective = document.getElementById("adjective").value;
        var name = document.getElementById("person").value;
        storyDiv.innerHTML =
          "I took my " +
          noun +
          " and " +
          adjective +
          " it. " +
          person +
          " didn't like it.";
      };
      libButton.addEventListener("click", libIt);
    </script>
  </body>
</html>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-ask). — Community, Sep 16 '21 at 07:36

Mad Libs in JavaScript - Dom Event

2 Answers2