JavaScript Treehouse Club - MASH MASH - JavaScript MASH Choice and Random Number Functions

Lauren Hunkeler
Lauren Hunkeler
2,759 Points

When I click the submit button, nothing happens.

When I click my submit button, nothing happens.The CSS and Javascript are both linked to my index.html. Here is my code, thanks! (it wouldn't let me take a snap shot)

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 = ['cardboardbox', 'tent', 'apartment', '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 mash = document.querySelector('#mash');  // This says make a new variable and find the HTML tag that has the ID of "home" 
    var job = document.querySelector('#job');
    var cats = document.querySelector('#cats');
    var animals = document.querySelector('#animals');
    var single = documentnet.querySelector('#single');

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

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_object = {
        'mash': mash_choice(),
        'job': get_answer('job'),
        'cats': get_answer('cats'),
        'animals': get_answer('animals')
        'single': get_answer('single')
    }
    // Fill in the answers
    fill_in_answers(answers_object);

    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 
<!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 to see if you will be the next Cat Lady.</p>

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

  <div id="answers" class="hide">
      <p>After being single for about <span id="single"></span> years, You have aquired <span id="cats"></span> cats, and a bunch of <span id="animals"></span> who run wild through your <span id="mash"></span> you bought from being a <span id="job"></span>.

  </div>

  <div class="bucket">

    <div class="choice-bucket">
      <h4 class="highlight">What is your job?</h4>
        <input name="job[]" type="text">
        <input name="job[]" type="text">
        <input name="job[]" type="text"> 
        <input name="job[]" type="text">
      </div>

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

      <div class="choice-bucket">
        <h4 class="highlight">What other animals do you own?</h4>
          <input name="animals[]" type="text">
          <input name="animals[]" type="text">
          <input name="animals[]" type="text">
          <input name="animals[]" type="text">
      </div>

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

  </div>

  <input type="submit" value="Calculate my Fate">
</form>
<script src="script.js"></script>
</body>
</html>
body {
  font-family: Helvetica, Arial;
  font-size: 27px;
  margin: 0 auto;
  max-width: 960px;
  padding: 16px 10px;
  line-height: 1.25em;
  background: #40E0D0;
  color: #fff;
  font-weight: 300;

}
h4 { height: 2em; 
}
{ text-align: center; }input { text-align: center; }
.logo{
  width: 100%;
}

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

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

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

}

.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;
}
.choice-bucket {
  width: 50%;
  float: left;
  display: inline;
  margin: 0;
  padding: 0;
} 

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

#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: 0 auto;
  padding: 80px 0;
}

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

form input[type=submit] {
    background: #1F1F1F;
    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%;
}

2 Answers

Steven Parker
Steven Parker
171,296 Points

:point_right: Looks like you have some typo's in the JavaScript.

On line 36, you have "documentnet" (I assume you meant "document")

And on line 60, you're missing a comma after: get_answer('animals')

Lauren Hunkeler
Lauren Hunkeler
2,759 Points

Thanks! It partially worked. Now when I hit submit, all the choice boxes disappear and when the page reloads, it only shows the logo, "Fill in the blanks to see if you will be the next Cat Lady," and one word from my mash array. The div is not there.