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 Stuff You Can Change

My code doesn't work

Here's my snapshot https://w.trhou.se/xqhjon7imn

I've spent two days trying to figure out whats wrong with my code. When I load my page and hit submit nothing happens. I've read other comments to try and figure out whats wrong but no luck. Please help me out I really want to understand this

5 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! There are a series of things going on here which is making this not work. First, and foremost, your JavaScript isn't being loaded at all. Keep in mind when learning to code, almost everything is case sensitive. This includes not only your code but also your files and folders. In your code you're linking to a script.js inside the java folder, but your folder is actually named Java. To rename the folder, right click on it and then choose rename and type in the lower-case "java". Once this happens, your code will load, but if you look in the console you'll still see errors.

Many of these errors have to do with how you are naming things. For instance, many of your functions are defined using the snake case convention such as my_function, but you are trying to call them using the camel case convention such as myFunction. Snake case is common in Python, but camel case is the preferred naming style in JavaScript. For instance you've named one function mash_choice but then later try to call mashChoice, but now JS can't find a function named mashChoice. This is repeated a bit throughout your code.

Once you fix the naming conventions here, you will start receiving some results, but they still won't be correct. In your code you have this block:

    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 hero = document.querySelector('#hero');
    var location = document.querySelector('#location');

This code is selecting parts of the HTML with those IDs, but no such elements currently exist in your HTML file. I feel like the HTML file might have been altered at some point.

My best suggestion to you is to start correcting some of these issues and then make a new snapshot so we can help you troubleshoot further.

Hope this helps! :sparkles:

thank you I will get started on that now

Okay so I changed my "Java" to "java", I thought line 19 in index.html was the ids or is it line 24. I put everything in camelCase that had snake_case. just to make sure I saw that I had one line with Answers so I changed everything to Answers instead of it being answers.

https://w.trhou.se/w9pxwgzx2o

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi again! Take a look at this line in your JS file (line 32):

var home = document.querySelector('#home');

This will select the element in your HTML file that has an id of "home". But there is nothing in your HTML file that has an ID of "home". The only places I find in your HTML that have ids are the following lines:

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

  <div id="Aswers" class="hide">
      <p>Your home is in <span id="location"></span> you are a professional <span id="profession"></span> and your also <span id="hero"></span> sidekick.
  </div>

See where it says id="location"? That's an id marker. Your querySelector is trying to select the element with "id="home"", but that doesn't exist right now. Also note, that you have changed "answers" to "Aswers". This will also cause problems. You meant to type "Answers" here, but it is now misspelled here but correct in your js.

Wait a minute it works!!!! I had forgot to save it thank gosh for the the little red/orange dot that reminded me. BUT Jennifer you're the best!

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Wow! You've made a lot of progress. Would believe you are off by one letter? Seriously. One letter.

On line 45 you have:

location.innerHTML = answers.location;

But you should have:

location.innerHTML = Answers.location;

Take it for a spin! :sparkles:

Okay I came back to this changed the last Answers. I don't know what's wrong. (Screaming on top of a mountain). Thank you your amazing I will come back to this. I might have to start over.

Okay thank you I've made those corrections. I'm starting to think this will never work lol. I've looked at other codes to see if I've made any other drastic changes and can't find any. But I've made the corrections to the things you pointed out but still nothing happens I thin maybe I've missed a step. Thank you for the help that you've gave so far.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

If you still want help with this, I'm willing to help, but I will need an updated snapshot of your workspace :smiley: