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 Shaun Montante Jr.
Shaun Montante Jr.
2,613 Points

My answer to this question is button = document.getElementById('sayPhrase'); but its not letting me move forward.

What am I doing wrong. My answer to the question of

QUESTION: There is a variable named button in app.js. Set its value to contain a reference to the button element in index.html with the ID of sayPhrase.

ANSWER: button = document.getElementById('sayPhrase');

What am I doing wrong?

js/app.js 
let button;
let 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>
Marina Shumeyko
Marina Shumeyko
5,647 Points

Hey. You were in the right way, but some step need to be done as well.

let input = document.getElementById("phraseText"); // take the value of input element;
let button = document.getElementById("sayPhrase"); // take the value of button element;
console.log(button); 

button.addEventListener('click', () => {
  alert(input.value); // now the input variable has a value, which you can display in alert
});
  1. If you type "button.addEventListene" before , you can see error in console.
  2. Input was empty. Before to type "input.value" need to take this value.

Hope it helps to understand. Console will help you to find the problems in your code. Good luck!

5 Answers

Steven Parker
Steven Parker
229,771 Points
Steven Parker
Steven Parker
229,771 Points

Your code is good, but it must come before button is used to add the event listener.

If you want, you can just assign button on the top line where it is defined using let.

Shaun Montante Jr.
Shaun Montante Jr.
2,613 Points
Shaun Montante Jr.
Shaun Montante Jr.
2,613 Points

Steven, I appreciate your help!!

Shaun Montante Jr.
Shaun Montante Jr.
2,613 Points
Shaun Montante Jr.
Shaun Montante Jr.
2,613 Points

Marina,

I appreciate your help as well!!

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

Heba Hendy
Heba Hendy
7,786 Points
Heba Hendy
Heba Hendy
7,786 Points

var button = sayPhrase; var input = phraseText;