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 JavaScript and the DOM (Retiring) Getting a Handle on the DOM Selecting by Id

Rick S
Rick S
11,239 Points

error msg in Challenge Task ! : Select the button with the ID sayPhrase and assign it to the button variable.

Not sure which module questions about this Challenge would appear in, but not having found any, I'll post this, though maybe it's already been addressed.

The existing code in the challenge is:

var input; var button;

button.addEventListener('click', () => { alert(input.value); });

=========================== To this challenge I added the following line of code:

    button = document.getElementByID('sayPhrase');

If I add this after the eventlistener and click on "Check Work" , I get the error message: "Bummer: There was an error with your code: TypeError: 'undefined' is not an object (evaluating 'button.addEventListener')"

If I add it before the eventlistener, I get the error: " There was an error with your code: TypeError: 'undefined' is not a function (evaluating 'document.getElementByID('sayPhrase')') "

This occurs in both Safari and Chrome. What's wrong with my code?

Thanks.

js/app.js
var button;
var input;

button.addEventListener('click', () => {
  alert(input.value);
});

button = document.getElementByID("sayPhrase");
index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Phrase Sayer</title>
  </head>
  <body>
    <p><input type="text" id="phraseText"></p>
    <p><button id="sayPhrase">Say Phrase</button></p>
    <script src="js/app.js"></script>
  </body>
</html>

Sometimes, the quizz system seems to get overwhelmed, especially if I've been working through a lot of modules. If you think your code is correct, log out of Treehouse, close your browser, and start the module again. Sorry, I'm too rusty to know immediately if your code is solid, but I have vague memories of that same error from a couple years ago.

3 Answers

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

Hi there, Rick Sweeney! The method you're looking for is getElementById not getElementByID. Note the casing on the "d" vs "D". It's important. One exists, the other does not :smiley:

Also, you will need to put the line that defines button above the code that adds the eventListener to the button.

Give it another go but this time with getElementById (lower case "d") and move the code to assign the value of button before adding the event listener.

Hope this helps! :sparkles:

Rick S
Rick S
11,239 Points

Yes, I just noticed that, fixed it, came here to reply and saw your response. I think I just had to get to sleep and start fresh at it today. Amazing how much time one can waste over something small. My thanks to you and Laura for your replies.

I still don't get it.. where does Guil even talk about assigning anything to a variable...this is not easy for visual learners. i went everywhere and nothing helps...

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

Hi there, Didier Pham! Guil shows this at around the 0:50 second mark of this video inside the same course. Remember that a const is a type of variable :smiley:

Hope this helps! :sparkles: