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 Making Changes to the DOM Modifying Elements

Posted by Raul Alvarez
Raul Alvarez
3,693 Points

I don't understand why I can't grab the input element.

Hey there, hope you're doing great.

I'm using the following query selector for getting the input element, as asked in the task. However, It's not read as valid:

const/let/var inputValue = document.querySelector('input').

Please help!

app.js 
const inputValue = document.querySelector('input');
index.html 
<!DOCTYPE html>
<html>
    <head>
      <title>DOM Manipulation</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
      <div id="content">
        <label for="linkText">Link Text:</label>
        <input type="text" id="linkText" value="sample text">
        <p class="info"></p>
      </div>
    <script src="app.js"></script>
  </body>
</html>

1 Answer

Guillermo Gallo
seal-mask
.a{fill-rule:evenodd;}techdegree
Guillermo Gallo
Full Stack JavaScript Techdegree Student 8,518 Points
Guillermo Gallo
.a{fill-rule:evenodd;}techdegree
Guillermo Gallo
Full Stack JavaScript Techdegree Student 8,518 Points

Hi Raul Alvarez

You are almost there. The problem is that the challenge is asking for the value of the input field, not the input element itself. What you have so far is just the input element, now you have to get the value property of the input element by adding .value, like this:

const inputValue = document.querySelector('input').value;
Guillermo Gallo
seal-mask
.a{fill-rule:evenodd;}techdegree
Guillermo Gallo
Full Stack JavaScript Techdegree Student 8,518 Points
Guillermo Gallo
.a{fill-rule:evenodd;}techdegree
Guillermo Gallo
Full Stack JavaScript Techdegree Student 8,518 Points

Also, just as a reference, when you are trying to select a specific element you should try not to reference it by the tag name as there are probably going to be more elements with the same tag name and it can lead to trouble.

In this example its ok because there is only 1 input field but if you had more input fields querySelector('input') would probably return something different than what you wanted.

So when targeting a specific element try using the element's id property which you know is always unique, for example:

const inputValue = document.querySelector('#linkText').value;
// or
const inputValue = document.getElementById('linkText').value;
Raul Alvarez
Raul Alvarez
3,693 Points

Thanks a lot Guillermo :)