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.
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..
let inputValue = document.querySelector('input').value; inputValue.textContent = ;
<!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>
Bella BradburyWeb Development Techdegree Student 15,060 Points
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
<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
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.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