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!

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

Michael Morale
Michael Morale
2,702 Points

My Javascript isn't working.

I cannot figure out why my JS isn't working. Can someone help?

8 Answers

Richard Verbraak
Richard Verbraak
7,739 Points

Hey,

If you could supply us your code in a comment, we could certainly help. You can either copy paste the code here or link to your Workspace by clicking on the Camera looking Icon in the top-right corner of your Workspace Environment. (the first icon from the 3). And paste the link in a comment.

Michael Morale
Michael Morale
2,702 Points

https://w.trhou.se/10vp4v9v98 I think I may have figured out part of the problem.

Michael Morale
Michael Morale
2,702 Points

I changed some things around and got closer, but no ciggie.

Dave StSomeWhere
Dave StSomeWhere
19,870 Points

It might help if you describe what isn't working as desired.

Michael Morale
Michael Morale
2,702 Points

When I hit submit, the answer box comes up, but none of the answers are included in the box itself.

Dave StSomeWhere
Dave StSomeWhere
19,870 Points

I would recommend debugging via your browsers dev tools, like inspect element in chrome. Also, you can insert come console.log() to help see what is happening.

Two errors pop out immediately:

  1. You don't specify your javascript in your html
  2. You're missing an apostrophe when you declare mash

From there start fixing the errors you should see in the console.

Hope that gets you started.

Michael Morale
Michael Morale
2,702 Points

Where in HTML would I link my JS?

Richard Verbraak
Richard Verbraak
7,739 Points

Just before the closing body tag is recommended. So that your actual page renders first with it's HTML content and CSS styling and THEN adds the interactivity of JavaScript.

Dave StSomeWhere
Dave StSomeWhere
19,870 Points

Looks like you are linking the js (was blank in prior snapshot)

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

Now if you inspect in the browser you should see the error for number two above - with a line number. Fix that and you will see additional error that need fixing:

My console show the following:

script.js:38 Uncaught TypeError: Cannot set property 'innerText' of null
    at fill_in_answers (script.js:38)
    at HTMLFormElement.handle_submission (script.js:60)
fill_in_answers @ script.js:38
handle_submission @ script.js:60

And the fun begins... :tropical_drink: :palm_tree:

Michael Morale
Michael Morale
2,702 Points

handle_submission is line 68, right? Is that what it's talking about?

Dave StSomeWhere
Dave StSomeWhere
19,870 Points

handle_submission at line 60 (not 68 - just has a dot in the zero) calls fill_in_answers and the actual error is at line 38 (in fill_in_answers). Start at the top - the actual error and the rest is showing you the call stack.

So it is unable to process line 38 - home.innerText = answers['mash']; - because home is null. So, you need to investigate why home isn't getting set.

Does that make any sense?

Michael Morale
Michael Morale
2,702 Points

Kind of. Is it a problem in the html?

Dave StSomeWhere
Dave StSomeWhere
19,870 Points

That would be my guess.

It appears that you are trying to set home with - var home = document.querySelector('#home'); and I don't see any elements in your HTML that have an id="home".

Michael Morale
Michael Morale
2,702 Points

I see. I see. Where would I put that?

Dave StSomeWhere
Dave StSomeWhere
19,870 Points

I have no idea, it's your show, where do you want it?

The section of code says something about finding the spans so maybe with your other spans???

<div id="answers" class="show">
      <p>Yesterday, I teamed up with <span id="superhero"></span> to fight <span id="Supervillain"></span> in the middle of <span id="location"></span>.

You probably should review the videos again, they should help guide you.