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 Handle Submission and Event Handler Functions

Amber Craig
Amber Craig
1,176 Points
Posted by Amber Craig
Amber Craig
1,176 Points

How do I undo all edits I've made to the HTML,CSS and Javascript?

The MASH page isn't functioning properly. When I click "Tell My Fortune" the page refreshes but nothing happens. Is there a way I can refresh all the code back to how it was?

Ehsan Dayusi
Ehsan Dayusi
Courses Plus Student 1,722 Points

In the preloaded code something is missing. the JS code is not linked to the html. open the html file, scroll all the way down. in the line <script src=""></script> just insert script.js between quotation marks. like this: <script src="script.js"></script>

11 Answers

yishan bai
yishan bai
4,116 Points
yishan bai
yishan bai
4,116 Points

@McKenna Ray if you want to change back to original code, the teacher has uploaded the code on the first video for each topic.good luck and keep going, we will be fine:)

Ehsan Dayusi
PLUS
Ehsan Dayusi
Courses Plus Student 1,722 Points
Ehsan Dayusi
Ehsan Dayusi
Courses Plus Student 1,722 Points

In the preloaded code something is missing. the JS code is not linked to the html. open the html file, scroll all the way down. in the line <script src=""></script> just insert script.js between quotation marks. like this: <script src="script.js"></script>

Jimmy Names
Jimmy Names
10,371 Points
Jimmy Names
Jimmy Names
10,371 Points

Hey man, have you tried closing the browser and restarting treehouse?

Amber Craig
Amber Craig
1,176 Points
Amber Craig
Amber Craig
1,176 Points

Hey, Yeah tried that.. it still opens with the same edits I've made.. Is there somewhere I can go to get the original code and just copy and paste it back to the original? I'm using Safari on a mac - I was thinking I could try 'reset safari' but for some reason with Yosemite they got rid of that option :S

Jimmy Names
Jimmy Names
10,371 Points
Jimmy Names
Jimmy Names
10,371 Points

what's the track slash challenge?? I'll find it and c and p it here..

Jimmy Names
Jimmy Names
10,371 Points
Jimmy Names
Jimmy Names
10,371 Points

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');

// 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

Jimmy Names
Jimmy Names
10,371 Points
Jimmy Names
Jimmy Names
10,371 Points

html:

<!DOCTYPE html> <html lang="en"> <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> </head>

<body> <form action="" method="post" id="mash"> <h1 class="title">MASH</h1> <p class="sub-title">Make sure to list five under each category.</p>

<div class="choice-bucket">
  <h4 class="highlight">What will your profession be?</h4>
  <input name="career[]">
  <input name="career[]">
  <input name="career[]">
  <input name="career[]">
  <input name="career[]">
</div>

<div class="choice-bucket">
  <h4 class="highlight">What kind of animal will you have?</h4>
  <input name="pet[]">
  <input name="pet[]">
  <input name="pet[]">
  <input name="pet[]">
  <input name="pet[]">
</div>

<div class="choice-bucket">
  <h4 class="highlight">Where will you live?</h4>
  <input name="location[]">
  <input name="location[]">
  <input name="location[]">
  <input name="location[]">
  <input name="location[]">
</div>
<div class="choice-bucket">
  <h4 class="highlight">What kind of car will you have?</h4>
  <input name="car[]">
  <input name="car[]">
  <input name="car[]">
  <input name="car[]">
  <input name="car[]">
</div>

<input type="submit" value="Tell My Future">

</form>

<div class="answers"> <h3>You will live in a <span id="home"></span></h3> <h3>You will be a <span id="career"></span></h3> <h3>You will have a <span id="pet"></span></h3> <h3>You will live in <span id="location"></span></h3> <h3>You will drive a <span id="car"></span></h3> </div>

<script src="script.js"></script> </body> </html>

Jimmy Names
Jimmy Names
10,371 Points
Jimmy Names
Jimmy Names
10,371 Points

hope that helps that's the code from the last MASH events/handler challenge..

Amber Craig
Amber Craig
1,176 Points
Amber Craig
Amber Craig
1,176 Points

Sorry dude thats done something weird but thanks for trying to help.. There muse be a way I can just UNDO everything and start again right? I'm sure she said it in one of the early lessons "if you think you've messed it up you can refresh it yada yada yada..." there must be a list of all the original code somewhere...

Jimmy Names
Jimmy Names
10,371 Points
Jimmy Names
Jimmy Names
10,371 Points

pfffft then I have no clue sorry.. can only recommend maybe deleting this Q and starting again.. I kinda clogged it up with bad shouts.. can onyl recommend using a different browser.. chrome - otherwise lol wait for someone who knows what they're talking about

Amber Craig
Amber Craig
1,176 Points
Amber Craig
Amber Craig
1,176 Points

haha no thanks for your help I think you are on the right track.. it's probably hidden somewhere within the teachers notes.. seems really complicated tho for such a simple thing. I'll try using a different browser too that sounds like a good idea :)

McKenna Ray
McKenna Ray
1,196 Points
McKenna Ray
McKenna Ray
1,196 Points

I'm having a very similar issue. My button seems broken. When I press it, the page doesn't even refresh. Nothing happens at all. I've messed with the JS quite a bit and I feel like I maybe messed with something important. Did you find a solution?

Ehsan Dayusi
Ehsan Dayusi
Courses Plus Student 1,722 Points

in the preloaded code something is missing. the JS code is not linked to the html. open the html file, scroll all the way down. in the line <script src=""></script> just insert script.js between quotation marks. like this: <script src="script.js"></script>

yishan bai
yishan bai
4,116 Points
yishan bai
yishan bai
4,116 Points

me too, the codes don't work when i click submit, any ways to put the original codes back...? plus, this lesson is sooo confusing, i was all on track before this one,now im completely lost....

McKenna Ray
McKenna Ray
1,196 Points

I agree! I feel like I'm missing something major but I've gone over the lesson 5 times and still, it doesn't seem to click. I think if I'd played it safe and didn't edit any of the JS or HTML, I'd be on track. I'm probably going to just start over. I've been avoiding doing that because I completely changed the theme and categories of the MASH game and was really happy with it, but if the 'submit' button doesn't work, the game is pretty pointless. Haha.

duncan Stanbury
duncan Stanbury
1,735 Points
duncan Stanbury
duncan Stanbury
1,735 Points

Mee too!! Most of it is over my head in this lesson. It seems like it's getting exponentially harder!...and I too am stuck, trying to get the original code back!

Jimmy Names
Jimmy Names
10,371 Points
Jimmy Names
Jimmy Names
10,371 Points

it's not the best fix, but can recommend importing your code, like all of it (html, css, js) into codepen.io and then c&p'ing that link into stackoverflow and asking the dev community.. someone somewhere will know the answer to each of your problems..

yishan bai
yishan bai
4,116 Points
yishan bai
yishan bai
4,116 Points

Thank you, i found the teacher uploaded html, css etc. code on the first video for every topic

Daniela Toro
Daniela Toro
1,770 Points
Daniela Toro
Daniela Toro
1,770 Points

I think the problem is that in the beggining the teacher asks us to change all the variables and make them our own... but as the course goes on our changes are not compatible with the pre-made style.css and script.js files. I'm having the same problem.

Ehsan Dayusi
Ehsan Dayusi
Courses Plus Student 1,722 Points

that's not the problem. in the preloaded code something is missing. the JS code is not linked to the html. open the html file, scroll all the way down. in the line <script src=""></script> just insert script.js between quotation marks. like this: <script src="script.js"></script>

Matthew Yelland
Matthew Yelland
2,150 Points
Matthew Yelland
Matthew Yelland
2,150 Points

I'm so glad I'm not the only one with this issue! I was previewing the code and was just saying to myself "Hang on, why aren't the answers showing!?". It would be nice if they could paste the original code on each page instead of having to find it on certain pages.