Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM Making Changes to the DOM Modifying Elements

Raul Alvarez
Raul Alvarez
1,420 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,490 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,490 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
1,420 Points

Thanks a lot Guillermo :)