JavaScript JavaScript and the DOM Getting a Handle on the DOM Selecting by Id

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>

3 Answers

Ajay Prasannan
Ajay Prasannan
14,739 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.

Eddington Shayanowako
Eddington Shayanowako
8,817 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
14,739 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

Starky Paulino
Starky Paulino
Front End Web Development Techdegree Student 3,810 Points

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

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