Getting stuck on 2/2 question..

Question

It's asking " Next, set the text content of the 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>

Answer 1 · 2022-12-02T14:02:00Z

December 2, 2022 2:02pm

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  tag below it. When we examine the index.html file we can see that there is in fact an empty  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  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  tag we should add in another variable that selects the  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  tag. Now that we have a line of code set up that will change the text displayed in the  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!

Answer 2 · 2022-12-02T17:16:17Z

December 2, 2022 5:16pm

Thank you so much

Welcome to the Treehouse Community

Looking to learn something new?

Peter Huang

Peter Huang

Getting stuck on 2/2 question..

2 Answers

Bella Bradbury

Bella Bradbury

Peter Huang

Peter Huang