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

Posted by Bill Wagner
Bill Wagner
1,448 Points

I changed my JS MASH script and need help fixing it.

I changed the JS script in MASH like Joy told me to, and now I can't get it to return a result. As I'm a newbie, I'm not entirely sure what I've done wrong. I'm pretty certain it's a few labels that don't match or a few semi colons I left out. Not really sure what to look for yet. Can someone connect with me and help?

Karolin Rafalski
Karolin Rafalski
11,368 Points
Karolin Rafalski
Karolin Rafalski
11,368 Points

Please post your code using the 'Markdown Cheatsheet' in this forum and maybe we can help!

Bill Wagner
Bill Wagner
1,448 Points

Here's the 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 || 5; // If no number passed in, default to 5 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 = ['being content', 'finding peace', 'understanding love', 'belonging somewhere']; // 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 feelings = document.querySelector('#feelings'); // This says make a new variable and find the HTML tag that has the ID of "home" var purpose = document.querySelector('#purpose'); var motivation = document.querySelector('#motivation'); 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;

}

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')
}
// 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

The CSS is fine. Here's the 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>Futuristic MASH</title> <link href="normalize.css" rel="stylesheet"> <link href="style2.css" rel="stylesheet"> </head> <body>

<h1 class="logo"><img src="peaceful.jpg" /></h1> <p class="description">Fill in the blanks and your life will be full.</p>

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

<div id="answers" class="hide"> <p>Your life is a series of <span id="feelings"></span> events which remind you that <span id="motivation"></span> values you as a person <span id="purpose"></span> and is invested in your hapiness as you get closer to your goal of <span id="home"></span>. </div>

<div class="bucket">

<div class="choice-bucket">
  <h4 class="highlight">Why do you get up each day?</h4>
    <input name="feelings[]" type="text">
    <input name="feelings[]" type="text">
    <input name="feelings[]" type="text">
    <input name="feelings[]" type="text">
  </div>

  <div class="choice-bucket">
    <h4 class="highlight">For whom to do live?</h4>
      <input name="purpose[]" type="text">
      <input name="purpose[]" type="text">
      <input name="purpose[]" type="text">
      <input name="purpose[]" type="text">
  </div>

 <div class="choice-bucket">
    <h4 class="highlight">What motivates you to keep going?</h4>
      <input name="motivation[]" type="text">
      <input name="motivation[]" type="text">
      <input name="motivation[]" type="text">
      <input name="motivation[]" type="text">
  </div>

</div>

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

The issue isn't the look. I can't get the JS to execute. Let me know what I've done wrong. I'm lost being new to all of this

2 Answers

Bill Wagner
Bill Wagner
1,448 Points
Bill Wagner
Bill Wagner
1,448 Points

I so guess since I don't understand how to properly apply the Markdown Checksheet to format my code I get ignored? Thanks for being a great community of supporting people. I could use a mentor right now, but since I'm not a coding native I get pushed aside. Good thing I only wasted $39 before figuring this out.

Trey Connally
Trey Connally
1,584 Points
Trey Connally
Trey Connally
1,584 Points

I need the ORIGINAL javascript as well! Someone help!