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

Julie Curry
Julie Curry
2,127 Points

The box that displays the fortune sentence is not showing up.

What am I doing wrong?

Simon Coates
Simon Coates
28,654 Points

can you post some code (using the markdown syntax) or provide a URL to a snapshot of your workspace (see https://teamtreehouse.com/library/previews-and-snapshots ) Without code, people are just guessing what the problem is.

Steven Parker
Steven Parker
170,315 Points

I think it's safe to say there's not enough here to even base a guess on.

Otherwise I might give it a shot!   -sp:sparkles:

Julie Curry
Julie Curry
2,127 Points

Thanks for your help and for sharing the link to that video.

Here is a snapshot https://w.trhou.se/08hkmtobhb

best, Julie

2 Answers

Simon Coates
Simon Coates
28,654 Points

first problem is that the src attribute on your script tag is blank. This means that the script is not included. The next problem comes with:

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'];
    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;
}

you are looking (what document.querySelector does) for HTML elements with id attributes of home, profession. pet and location, but some of these (at least) do not seem to feature in the HTML. If an element doesn't exist, an attempt to access it's properties will result in an error. Unless these are created dynamically, you need to add these elements to the HTML. For demo purposes, i used:

<div id="answers" class="hide">

  <p>Your vacation is in <span id="location"></span> with <span id="friend"></span> where you will feel <span id="emotion"></span> <span id="activity"></span>....
  <span id="profession"></span>
    <span id="home"></span>
    <span id="pet"></span>
  </p>
 </div>
Simon Coates
Simon Coates
28,654 Points

So this is what i got for index.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>MASH with Julie</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 future vacation will be foretold.</p>

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

<div id="answers" class="hide">
<!-- STC: combine spans with ids to match the .js file, into some kind of meaningful statement.-->
  <p>Your vacation is in <span id="location"></span> with <span id="friend"></span> where you will feel <span id="emotion"></span> <span id="activity"></span>....
  <span id="profession"></span>
    <span id="home"></span>
    <span id="pet"></span>


  </p>
 </div>
<div class="bucket">

 <div class="choice-bucket">
   <h4 class="highlight">Where will you vacation?</h4>
    <input name="location[]">
    <input name="location[]">
    <input name="location[]">
    <input name="location[]">
  </div>
  <div class="choice-bucket">
    <h4 class="highlight">PEt.</h4>
      <input name="pet[]">
      <input name="pet[]">
      <input name="pet[]">
      <input name="pet[]">
  </div>
 <div class="choice-bucket">
    <h4 class="highlight">Profession</h4>
      <input name="profession[]">
      <input name="profession[]">
      <input name="profession[]">
      <input name="profession[]">
  </div>
</div>

 <input type="submit" value="Tell my fortune">
</form>  
<script src="script.js"></script>
</body>
</html>

and then for the js file i came up with:

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 = ['condo', 'pluto', 'rocket', 'submarine', 'car'];  // The array of choices to pick from 
    var randomNum = random_number(5);  // 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
    //STC: these variables need elements in the HTML with these ids.
    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
    //STC: NEED TO ENSURE answers VAR IS POPULATED WITH VALUES FOR THESE KEYS. SEE handle_submission METHOD
    home.innerText = answers['mash'];
    profession.innerText = answers['profession'];
    pet.innerText = answers['pet'];
    location.innerText = answers['location'];
    home.innerHTML = answers.mash;  // Change content of element in HTML doc with the id "home" to the "mash" value in answers 
    profession.innerHTML = answers.profession;  // Change 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
    //STC: parameter to get_answer method has to have related Choice bucket in HTML
    var answers_object = {
        'mash': mash_choice(),
        'profession': get_answer('profession'),
        'pet': get_answer('pet'),
        'location': get_answer('location')
    }
    fill_in_answers(answers_object); // Fill in the 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 

I added some comments - search on STC. But the point is that you need the HTML to match up to javascript's use of it. So you need choice buckets and span elements to match the handle submission function and the fill_in_answers function.