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

Posted by Natsai Mutyavaviri
Natsai Mutyavaviri
6,656 Points

Select the button with the ID sayPhrase and assign it to the button variable.

Not too sure what is required here

js/app.js 
var button;
var input;
const sayPhrase = document.getElementByID('sayPhrase');
sayPhrase.addEventListener('click', () => {
  button(input.value);
});
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>

9 Answers

Ajay Prasannan
Ajay Prasannan
16,002 Points

Hi Natsai, you're very close, but all you need to do is make sure the result of document.getElementByID() is assigned back into the button variable, as that's the one referred to in the function that appears later on. [Edit: I really should have said that "a click handler is assigned to the button variable later on."]

I ended up with the following, which passed the challenge:

var button = document.getElementById('sayPhrase');
var input;

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

Hope this helps!

PS. I expect a later task involves assigning the correct element to the input variable.

Natsai Mutyavaviri
Natsai Mutyavaviri
6,656 Points

It worked! Thanks

Omar Ocampo
Omar Ocampo
3,166 Points

This code works perfect!!!

Thanks

Manoj Gurung
Manoj Gurung
5,318 Points
Manoj Gurung
Manoj Gurung
5,318 Points

the question ask us to just do the 1st line right ?

Manoj Gurung
Manoj Gurung
5,318 Points
Manoj Gurung
Manoj Gurung
5,318 Points

what question ask is different from the answer required- is this creating confusion

Eddington Shayanowako
Eddington Shayanowako
8,824 Points
Eddington Shayanowako
Eddington Shayanowako
8,824 Points

Hie Natsai and Ajay. To me the above code from Ajay is nor passing the test. I just copied as it is but its not passing

Ajay Prasannan
Ajay Prasannan
16,002 Points

Hi Eddington, that's very odd. I just tried copying my snippet into the JS file and it definitely passes for me. Does the page give any error info?

Thanks,

Ajay

Alan Lane
Alan Lane
9,156 Points
Alan Lane
Alan Lane
9,156 Points

Thank you jb30, that was a great catch, I did not even think that was any kind of issue! I figured ID would stay caps and not be a part of the camel case convention! It finally worked!!

Brittani Kinzalow
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brittani Kinzalow
Front End Web Development Techdegree Graduate 12,600 Points
Brittani Kinzalow
.a{fill-rule:evenodd;}techdegree seal-36
Brittani Kinzalow
Front End Web Development Techdegree Graduate 12,600 Points

For task one of two answer is: var button = document.getElementById('btn-phrase');

For task two of two answer is: var input = document.getElementById('input-phrase');

You need to put the answer before the given text: button.addEventListener('click', () => { alert(input.value); });

You can't add both answers together on step one or you will get an error.

Alan Lane
Alan Lane
9,156 Points
Alan Lane
Alan Lane
9,156 Points

var button; var input; button = document.getElementByID('sayPhrase'); input = document.getElementByID('phraseText'); button.addEventListener('click', () => { alert(input.value); });

Why is this not working!! In the code above you have declared the variable twice, I got an error code for that, tried this and it tells me there is an undefined error...... Can someone point out where I went wrong!

jb30
jb30
44,806 Points

Instead of document.getElementByID, try document.getElementById with the last letter in lowercase.

Starky Paulino
seal-mask
.a{fill-rule:evenodd;}techdegree
Starky Paulino
Front End Web Development Techdegree Student 6,398 Points
Starky Paulino
.a{fill-rule:evenodd;}techdegree
Starky Paulino
Front End Web Development Techdegree Student 6,398 Points

let button = document.getElementById('sayPhrase'); let input = document.getElementById('phraseText');

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

ellie adam
ellie adam
26,377 Points
ellie adam
ellie adam
26,377 Points

Here is my solution

var button;
var input;

var button = document.getElementById('sayPhrase');
var input = document.getElementById('phraseText');

button.addEventListener('click', () => {
  alert(input.value);
});
Amber Awada
Amber Awada
3,080 Points
Amber Awada
Amber Awada
3,080 Points

I've been trying to figure this out. I did everything above but im still getting a bummer:Cannot read property '1' of null

Alan Lane
Alan Lane
9,156 Points

Me too! I copied the text exactly and it does not work!! Giving up!!

Eshwar N
Eshwar N
4,568 Points
Eshwar N
Eshwar N
4,568 Points

check this solution

var button = document.getElementById('btn-phrase');

var input;

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