Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by jdh
jdh
12,334 Points

Pair Up to Code: Javascript Madlibs Game

After another post where someone was having difficulty learning javascript, a mod suggested pairuptocode.

I think its a great idea and I'm on the second javascript question where you make a mad libs game but I can't get it to work.

Any thoughts?

     <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8" />
        <title></title>
      </head>
      <body>
        <h1>Mad Libs</h1>
        <ul>
          <li>Noun: <input type="text" id="noun">
          <li>Adjective: <input type="text" id="adjective">
          <li>Someone's Name: <input type="text" id="name">
        </ul>
        <button id="lib-button">Lib it!</button>
        <div id="story"></div>
      </body>
      </html>

  function madLibs() {
      var storyDiv = document.getElementById("story");
      var name = document.getElementById("name").value;
      var adjective = document.getElementById("adjective").value;
      var noun = document.getElementById("noun").value;
      storyDiv.innerHTML = name + " married a " + adjective + " " + noun + "... So weird!";
    }

    var libButton = document.getElementById('lib-button');
    libButton.addEventListener('click', madLibs);

3 Answers

Blaize Pennington
Blaize Pennington
13,879 Points
Blaize Pennington
Blaize Pennington
13,879 Points

I'm more knowledgeable about jQuery than javascript, so I can't help you fix it in js, but here is the code to get it to work in jQuery:

<!DOCTYPE html>

<html>

    <head>

        <!-- CONNECTING ALL STYLE SHEETS AND FONTS -->

        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <script src="js/script.js" type="text/javascript"></script>

        <!-- END CONNECTION -->


        <title>Javascript Solution</title>

    </head>

    <body>
        <h1>Mad Libs</h1>
        <ul>
          <li>Noun: <input type="text" id="noun">
          <li>Adjective: <input type="text" id="adjective">
          <li>Someone's Name: <input type="text" id="name">
        </ul>
        <button id="lib-button">Lib it!</button>
        <div id="story"></div>
    </body>

</html>

var madLibs = function() { 
    var storyDiv = document.getElementById("story"); 
    var name = document.getElementById("name").value; 
    var adjective = document.getElementById("adjective").value; 
    var noun = document.getElementById("noun").value; 
    storyDiv.innerHTML = name + " married a " + adjective + " " + noun + "... So weird!"; 
    }


$(document).ready(function(){
    $('#lib-button').click(function(){
        madLibs();
    });
})
jdh
jdh
12,334 Points
jdh
jdh
12,334 Points

Cool thanks! anyone see an issue with my javascript?

jdh
jdh
12,334 Points
jdh
jdh
12,334 Points

Just figured it out. The JS was correct however I had my script running in the head of my html doc so i was getting and error of null eventlistener because it hadnt loaded the IDs :)