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

MacKenzie Santiago
MacKenzie Santiago
5,084 Points

HOW???? Select the <input> element and assign its value to the variable inputValue.

HOW ????????? WHAT??????

app.js
const inputValue = document.querySelector(value="sample text");
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>

6 Answers

MacKenzie Santiago
MacKenzie Santiago
5,084 Points

const inputValue = document.querySelector("input").value;

Steven Parker
Steven Parker
216,033 Points

MacKenzie Santiago — did you mean to mark your own comment as "best answer"?   :see_no_evil:

Steven Parker
Steven Parker
216,033 Points

The querySelector function is a good choice, but the argument should be just a string containing a selector like you might use in CSS (such as the tag name).

Then you would add .value to access the value property from the element returned by the function.

Steven Parker
Steven Parker
216,033 Points

There isn't just one "correct answer" to this challenge (or to most of them in the courses). But here are a few more details:

The expression value="sample text" isn't a valid argument for the function because it's not a string. You could fix that with another set of quotes, but even so attribute selectors need to be enclosed in brackets ([]). Yet there are far easier ways to select the element, the simplest is just the tag name "input". Another one would be the ID "#linkText".

Once you have the selector function working, this code will assign a reference to the element to the variable, but the instructions say to "assign its value to the variable". So to access the value attribute of the element, you can add the attribute name after the function call, joined using the membership operator (a period, so .value).

Steven Parker
Steven Parker
216,033 Points

Here's generic pseudocode to select an element and assign a specific attribute of it to a variable. Colored terms are links to associated documentation pages.

const variable_name = document.querySelector("a valid CSS selector string").the_attribute_name;

MacKenzie Santiago
MacKenzie Santiago
5,084 Points

Steven Parker I dont understand what you just said...could you please just type the correct answer?????? Im more likey to learn that way as I am VISUAL and not a text kind of learner.

MacKenzie Santiago
MacKenzie Santiago
5,084 Points

Steven Parker If you could use more examples rather than text, it would help. Your second explanation is way MORE confusing than the first.

MacKenzie Santiago
MacKenzie Santiago
5,084 Points

Im not asking for 'clever'...Im just asking for a simple answer for this problem, no matter the solution. Thanks.