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

Getting stuck on 2/2 question..

It's asking " Next, set the text content of the <p> element with the class info to the value stored in inputValue. "

I'm not sure what to put in here.. Could someone please give me the answer so I can learn from it? Im not good in terms of trying to answer it's question..

Thank you

app.js
let inputValue = document.querySelector('input').value;

inputValue.textContent = ;
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>

2 Answers

Bella Bradbury
seal-mask
.a{fill-rule:evenodd;}techdegree
Bella Bradbury
Web Development Techdegree Student 15,060 Points

Hello Peter!

First, let's briefly explain what this challenge is asking with this question! In the first step it asked you to capture the value of the input field by selecting the input tag and assigning it to the inputValue variable. That step means that your JavaScript code is now able to understand what you've typed into the input field. Great job with that step! Now it's asking us to display whatever is typed into the input field in the <p> tag below it. When we examine the index.html file we can see that there is in fact an empty <p> tag underneath the <input> tag that has the class of info. In this challenge if our code is working right, when we refresh the preview after modifying our code it will display 'sample text' underneath the input field. Using the preview function for challenges is a really great way to see if what you're coding is having the desired effect!

So now that we understand what the goal is for this challenge, let's come up with a solution to get from where we are (knowing the value of the input field via the inputValue variable) to where we want to be (displaying the value captured in inputValue into the <p class="info"> element below it when the preview is refreshed).

The first thing that should stand out to us is that this question is asking us to work with another element from the html file. In order to change the <p> tag we should add in another variable that selects the <p class="info"> element. We haven't been given what exactly this new variable should be named, but we should do our best to make sure it makes sense. Let's go ahead and add something like this right under our inputValue variable:

var inputResult = document.querySelector('.info');

Now that we can interact with both the input field and the paragraph element, we can move on to making our code functional! The question gives us a major hint on how we should be manipulating the DOM and that is with .textContent property. You've done a great job when it comes to picking up on this hint, we'll just need to re-arrange that line of code to get the desired results. Right now you are trying to set the Text Content of the input variable, let's instead change that to our inputResult variable: inputResult.textContent =. This way we're going to be able to change the content of our currently empty <p> tag. Now that we have a line of code set up that will change the text displayed in the <p> element, we can set what the text should display, and we already have everything we need! We want the content of inputResult to display inputValue, so our full line of code should look like:

inputResult.textContent = inputValue;

Now if we refresh the preview we'll see that by adding our paragraph selector and .textContent lines of code it displays 'sample text' right under the input field!

Hope this helps!

Thank you so much