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 Treehouse Club - MASH MASH - JavaScript MASH Choice and Random Number Functions

Taylor Durkin
Taylor Durkin
4,832 Points
Posted by Taylor Durkin
Taylor Durkin
4,832 Points

Can't Get the Game to Work =(

I've looked at the other questions and answers for why the game might not be working, but none of them solve my problem. See comments below for code. Thanks!

Taylor Durkin
Taylor Durkin
4,832 Points
Taylor Durkin
Taylor Durkin
4,832 Points 
<!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>Cat-Lady Mash</title>
  <link href="normalize.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>
<body>

  <h1 class="logo"><img src="img/mash-logo.svg" /></h1>
  <p class="description">Fill in the blanks and your cat-filled future will be foretold.</p>

<form action="" method="post" id="mash">
  <div id="answers" class="hide">
      <p>You live in a <span id="home"></span> with <span id="cats"></span> <span id="breed"></span> cats, and will be single for <span id="years"></span> years. 
  </div>


  <div class="bucket">

    <div class="choice-bucket">
      <h4 class="highlight">How many cats will you have?</h4>
        <input name="cats[]" type="text">
        <input name="cats[]" type="text">
        <input name="cats[]" type="text">
        <input name="cats[]" type="text">
      </div>

      <div class="choice-bucket">
        <h4 class="highlight">What breed of cats will they be?</h4>
          <input name="breed[]" type="text">
          <input name="breed[]" type="text">
          <input name="breed[]" type="text">
          <input name="breed[]" type="text">
      </div>

     <div class="choice-bucket">
        <h4 class="highlight">How many years are you single?</h4>
          <input name="years[]" type="text">
          <input name="years[]" type="text">
          <input name="years[]" type="text">
          <input name="years[]" type="text">
      </div>

  </div>

  <input type="submit" value="Tell my cat-lady fortune">

  </form>
  <script src="script.js"></script>
</body>
</html>
Taylor Durkin
Taylor Durkin
4,832 Points
Taylor Durkin
Taylor Durkin
4,832 Points 
body {
  font-family: Helvetica, Arial;
  font-size: 27px;
  margin: 0 auto;
  max-width: 960px;
  padding: 40px 10px;
  line-height: 1.65em;
  background: LightCoral;
  color: #fff;
  font-weight: 300;
}

.logo{
  width: 100%;
}

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

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

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

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

.choice-bucket input {
    font-size: 18px;
    margin: 15px 4%;
    padding: 16px 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;
    overflow: hidden; /* add this */
}

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

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

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

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

.show {
  opacity: 1;
  height: 100%;
}
Taylor Durkin
Taylor Durkin
4,832 Points
Taylor Durkin
Taylor Durkin
4,832 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 = ['manor', 'airplane', 'stilt house', 'houseboat'];  // 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 cats = document.querySelector('#cats');
    var breed = document.querySelector('#breed');
    var years = document.querySelector('#years');

    // Fill them with the provided answers
    home.innerText = answers['mash'];
    cats.innerText = answers['cats'];
    breed.innerText = answers['breed'];
    years.innerText = answers['years'];
    home.innerHTML = answers.mash;  // Change the content of the element in the HTML doc with the id "home" to the "mash" value in answers 
    cats.innerHTML = answers.cats;  // Change the content of the element in the HTML doc with the id "cats" to the "cats" value in answers 
    breed.innerHTML = answers.breed;
    years.innerHTML = answers.years;
}

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(),
        'cats': get_answer('cats'),
        'breed: get_answer('breed'),
        'years': get_answer('years')
    }
    // 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

Nicholas Grenwalt
Nicholas Grenwalt
46,626 Points
Nicholas Grenwalt
Nicholas Grenwalt
46,626 Points

In your 'var answers' object you are missing an apostrophe after breed (i.e. your's is 'breed and should be 'breed'). Add that and let me know if it works. If not we'll continue on k. : )

Taylor Durkin
Taylor Durkin
4,832 Points
Taylor Durkin
Taylor Durkin
4,832 Points

PERFECT! Thank you! After all the bits and pieces I parsed through, I figured it was something tiny I just wasn't seeing! I definitely need to practice closing all apostrophes and commas. Thanks again!

Nicholas Grenwalt
Nicholas Grenwalt
46,626 Points
Nicholas Grenwalt
Nicholas Grenwalt
46,626 Points

It usually is isn't it? haha Extra pair of eyes always comes in hand. Glad I can help you out. If you would be so kind to upvote my answer I'd greatly appreciate it. Keep up the coding and have a great evening Taylor.