Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Treehouse Club - MASH MASH - JavaScript Stuff You Can Change

Stumped...MASH results not displaying when i click tell my fortune button

So when i click the get my future button it just takes me to the top of the page and displays nothing...im stumped as to why. Here is my code

Here is my HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=0.5, minimal-ui">

  <title>Monster MASH</title>
  <link href="normalize.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>
<body>

  <h1 class="logo"><img src="img/alien-29939.svg" width="400" height="400" /></h1>
  <p class="description">Fill in the blanks to find out what monster you will encounter.</p>

<form action="" method="post" id="mash">

  <div id="answers" class="hide">
      <p>You will see a <span id="location"></span>monster named <span id="pet"> eating</span><span id="profession">and is walking his pet<span id="wear"></span> </span>.
  </div>

  <div class="bucket">

    <div class="choice-bucket">
      <h4 class="highlight">What color is the monster?</h4>
        <input name="location[]" type="text">
        <input name="location[]" type="text">
        <input name="location[]" type="text">
        <input name="location[]" type="text">
      </div>

      <div class="choice-bucket">
        <h4 class="highlight">What is the monster eating?</h4>
          <input name="profession[]" type="text">
          <input name="profession[]" type="text">
          <input name="profession[]" type="text">
          <input name="profession[]" type="text">
      </div>

     <div class="choice-bucket">
        <h4 class="highlight">What is the monster's name?</h4>
          <input name="pet[]" type="text">
          <input name="pet[]" type="text">
          <input name="pet[]" type="text">
          <input name="pet[]" type="text">
       </div>

       <div class="choice-bucket">
        <h4 class="highlight">What type of pet does the monster have?</h4>
          <input name="wear[]" type="text">
          <input name="wear[]" type="text">
          <input name="wear[]" type="text">
          <input name="wear[]" type="text">
         </div>
       </div>

  <input type="submit" value="Tell my fortune">

</form>
<script src="script.js"></script>
</body>
</html>

heres the CSS

body {
  font-family: Helvetica, Arial;
  font-size: 27px;
  margin: 0 auto;
  max-width: 960px;
  padding: 40px 10px;
  line-height: 1em;
  background: #000000;
  color: #fff;
  font-weight: 300;
}

.logo{
  width: 100%;
}

.logo img {
  margin: 0 auto;
  display: block;
}

.description {
  margin: 10px auto;
  text-align: center;
}

.bucket {
  width: 100%;
  margin-bottom: 40px;
  display: inline-block;
}

.choice-bucket {
  width: 25%;
  float: left;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.choice-bucket input {
    font-size: 18px;
    margin: 10px 4%;
    padding: 11px 0;
    width: 92%;
    color: #BB475C;
    border-radius: 6px;
    border: 0;
    outline: 0;
    text-indent: 20px;
}

.highlight {
  font-size: 18px;
  margin-left: 30px;
  opacity: .8;
  line-height: 24px;
}

#answers {
    /* opacity: 0; */
    margin: 60px 0;
    background: #fff;
    border-radius: 6px;
    color: #BB475C;
    transition: 1s linear;
}

#answers p {
  max-width: 760px;
  margin: auto;
  padding: auto;
}

#answers p span {
  font-weight: bold;
}

form input[type=submit] {
    background: #458B00 ;
    border: 0;
    color: #fff;
    font-size: 20px;
    padding: 1em 2em;
    cursor: pointer;
    margin: 0 auto 30px;
    display: block;
    text-align: center;
    border-radius: 6px;
    font-weight: bold;
}

.hide {
  opacity: 0;
  height: 0;
}

.show {
  opacity: 1;
  height: 100%;
}

Here is my javascript

function random_number(num) {  // New function called random_choice that takes one parameter, num (or a number)
    // Get a random number between 0 and a passed-in number
    var num = num || 4  // If no number passed in, default to 4
    return Math.floor(Math.random() * num); // Round the answer down (floor) of a random number between 0 and 1 and multiply it by a number. Then return a value and exit the function.
}

function mash_choice() {  // New function called mash_choice that doesn't take any parameters 
    // Since MASH is a special case, give it its own list
    var mash = ['mansion', 'apartment', 'shack', 'house'];  // The array of choices to pick from 
    var randomNum = random_number(4);  // Use the above function to get a number between 0 and 4
    return mash[randomNum];  // Return the list item the random number function just picked and exit the function 
}

function get_answer(category) { 
    // Get a random answer from the available answers in a given category
    var choices = [];  // A blank array to hold the user provided answer  
    var selector = 'input[name="' + category + '[]"]';  // Build a CSS selector for the blanks in our passed in category 
    var inputs = document.querySelectorAll(selector);  // Get all of the inputs that match our selector 
    var answer;  

    for (var i = 0; i < inputs.length; i++) {  // Begin a for loop that will run through the code. i++ = add one to the counter which is "i"
        answer = inputs[i].value;  // Get the input with the index value of the counter and get the value ie. if they typed in dog, you get back "dog" 
        if (answer !== '') {  // If answer doesn't equal a blank... !== means doesn't equal 
            choices.push(answer); //...add it to the end of the list 
        }
    }
    return choices[random_number(choices.length)];   // Pick and return a random choice choice.length = number of answers the user provided in that category 
}

function fill_in_answers(answers) {
    // Find the spans that need filled
    var home = document.querySelector('#home');  // This says make a new variable and find the HTML tag that has the ID of "home" 
    var profession = document.querySelector('#profession');
    var pet = document.querySelector('#pet');
    var location = document.querySelector('#location');

    // Fill them with the provided answers
    home.innerText = answers['mash'];
    profession.innerText = answers['profession'];
    pet.innerText = answers['pet'];
    location.innerText = answers['location'];
    wear.innerText = answers['wear'];
    home.innerHTML = answers.mash;  // Change the content of the element in the HTML doc with the id "home" to the "mash" value in answers 
    profession.innerHTML = answers.profession;  // Change the content of the element in the HTML doc with the id "career" to the "career" value in answers 
    pet.innerHTML = answers.pet;
    location.innerHTML = answers.location;
}

function handle_submission(evt) {
    evt.preventDefault();  // Stop the form from reloading the page 
    evt.stopPropagation();  // Stop the form from reloading the page

    // Build up our answers object
    var answers = {
        'mash': mash_choice(),
        'profession': get_answer('profession'),
        'pet': get_answer('pet'),
        'location': get_answer('location')
        'wear': get_answer('wear')
    }
    // Fill in the answers
    fill_in_answers(answers);

    var answer_div = document.querySelector('#answers');
    answer_div.classList.add('show');
}

// Find the form on the page and attach a handler for when it's submitted
var form = document.querySelector('#mash');  
form.addEventListener('submit', handle_submission);  // Anytime the form is submitted, we want to call the function handle_submission 

2 Answers

I figured out the problem! i added a 4th question and neglected to add a var and innerHtml for it. My advice to anyone adding an additional question...make sure to add the new id to all the sections where you see the existing ids(by default home,profession,pet,location).

function fill_in_answers(answers) {
    // Find the spans that need filled
    var home = document.querySelector('#home');  // This says make a new variable and find the HTML tag that has the ID of "home" 
    var profession = document.querySelector('#profession');
    var pet = document.querySelector('#pet');
    var location = document.querySelector('#location');

    // Fill them with the provided answers
    home.innerText = answers['mash'];
    profession.innerText = answers['profession'];
    pet.innerText = answers['pet'];
    location.innerText = answers['location'];
    wear.innerText = answers['wear'];
    home.innerHTML = answers.mash;  // Change the content of the element in the HTML doc with the id "home" to the "mash" value in answers 
    profession.innerHTML = answers.profession;  // Change the content of the element in the HTML doc with the id "career" to the "career" value in answers 
    pet.innerHTML = answers.pet;
    location.innerHTML = answers.location;
Jason Bumby
Jason Bumby
2,648 Points

{{{function random_number(num) { // New function called random_choice that takes one parameter, num (or a number) // Get a random number between 0 and a passed-in number var num = num || 4 // If no number passed in, default to 4 return Math.floor(Math.random() * num); // Round the answer down (floor) of a random number between 0 and 1 and multiply it by a number. Then return a value and exit the function. }

function mash_choice() { // New function called mash_choice that doesn't take any parameters // Since MASH is a special case, give it its own list var mash = ['mansion', 'apartment', 'shack', 'house']; // The array of choices to pick from var randomNum = random_number(4); // Use the above function to get a number between 0 and 4 return mash[randomNum]; // Return the list item the random number function just picked and exit the function}}}

I'm certainly no expert, but it looks like you've added a 4th question to your MASH which means you may have to change the value of 4 in your JavaScript to 5. Like I said though, I'm no expert, just throwing it out there.

That didn't fix the problem...thanks for trying.