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 Callie Crownover
Callie Crownover
1,588 Points

How do I solve this question?

I don't understand what I am doing wrong here?

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

button.addEventListener('click', () => {
  alert(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>

1 Answer

Grzegorz Zielinski
Grzegorz Zielinski
5,838 Points
Grzegorz Zielinski
Grzegorz Zielinski
5,838 Points

There are actually 2 minor mistakes in your script.

var button = document.getElementById('sayPhrase');
var input = document.getElementById('input'); // Incorrect target value. 'input' is not an ID for your input element in HTML file, the correct value here should be "phraseText" since your HTML file has '<input type="text" id="phraseText">'
var sayPhrase = document.getElementById('sayPhrase'); // You don't have to define variable for "button" second time, you have done it already as a 'var button' so you can delete this variable.

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

Correct JS code with changes should look like that:

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

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

Hope it helps!