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

Brittany Smith
Brittany Smith
8,046 Points

Nothing Happens when I hit submit

I have added extra questions to my .js and I thought I'd added all the information to all the locations of the variables. I also made sure the script.js is in the tags at the bottom of my HTML.

'''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</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 find out what your destiny is!</p>

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

<div id="answers" class="hide"> <p>Your home is in <span id="location"></span> with <span id="kids"></span>kids, a <span id="pet"></span>. As you are a <span id="profession"></span> who owns a <span id="mash"></span> and a <span id="car"></span>. You spend your free time <span id="fun"></span>. </div>

<div class="bucket">

<div class="choice-bucket">
  <h4 class="highlight">What is your dream location?</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">How do you make money?</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 wil you do for fun?</h4>
      <input name="fun[]" type="text">
      <input name="fun[]" type="text">
      <input name="fun[]" type="text">
      <input name="fun[]" type="text">
  </div>

  <div class="choice-bucket">
    <h4 class="highlight">What about a car? Do you drive?</h4>
      <input name="car[]" type="text">
      <input name="car[]" type="text">
      <input name="car[]" type="text">
      <input name="car[]" type="text">
  </div>

 <div class="choice-bucket">
    <h4 class="highlight">Do you want to have any kids?</h4>
      <input name="kids[]" type="text">
      <input name="kids[]" type="text">
      <input name="kids[]" type="text">
      <input name="kids[]" type="text">
  </div>

  <div class="choice-bucket">
  <h4 class="highlight">How about a pet?</h4>
    <input name="pet[]" type="text">
    <input name="pet[]" type="text">
    <input name="pet[]" type="text">
    <input name="pet[]" type="text">
  </div>

</div>

<input type="submit" value="Okay! Tell me Now!"> </form> <script src="script.js"></script> </body> </html>'''

'''js 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'); var kids = document.querySelector('#kids'); var fun = document.querySelector('#fun'); var car = document.querySelector('#car');

// Fill them with the provided answers
home.innerText = answers['mash'];
profession.innerText = answers['profession'];
pet.innerText = answers['pet'];
location.innerText = answers['location'];
  kids.innerText = answers['kids'];
  fun.innerText = answers['fun'];
  car.innerText = answers['car'];
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;

kids.innerHTML = answers.kids; fun.innerHTML = answers.fun; car.innerHTML = answers.car;

}

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'),
  'car': get_answer('car'),
  'kids': get_answer('kids'),
  'fun': get_answer('fun'),
}
// 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 '''

Steven Parker
Steven Parker
171,904 Points

To make the code more readable, you can format it using the instructions found in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:

Another good way to share code that makes it easier to try out and keeps the message short is to make a snapshot of the workspace and provide the link

Brittany Smith
Brittany Smith
8,046 Points

I tried to add the ''' ''' as suggested but it doesn't seem to have changed anything.

Here's the snapshot link

1 Answer

Steven Parker
Steven Parker
171,904 Points

The submit works fine, but the program has a problem.

While processing your page, the function fill_in_answers includes this code:

  var home = document.querySelector('#home');
// ...
  home.innerText = answers['mash'];

The first line attempts to find an element with the ID "home" but fails, giving the variable a value of undefined. When the other line is reached, a TypeError occurs from attempting to set the innerText property on the undefined element.

You can easily fix this by either removing the references to "home" in the JavaScript, or by adding an appropriate element with that ID to the HTML.


:information_source: The characters used by Markdown for code quoting are accents (```), not apostrophes (''').

But for this amount of code, the snapshot was a much better way to share anyway.

Brittany Smith
Brittany Smith
8,046 Points

Thank you! On both accounts.