Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Modifying Elements

Sondre Fjellving
Sondre Fjellving
4,700 Points

Why doesn't this work?

I don't seem to be able to assign the text content of the <a>-element to the variable inputValue. I would love some help! Thanks in advance.

app.js
let inputValue = document.querySelector("#linkName").value;
inputValue.value = document.querySelector("#link").textContent;

//Store the value of the text input element in the variable inputValue. (If you need a refresher on getting the value of a text input, this video from the previous section demonstrates how.)
index.html
<!DOCTYPE html>
<html>
    <head>
        <title>DOM Manipulation</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
        <div id="content">
            <label>Link Name:</label>
            <input type="text" id="linkName">
            <a id="link" href="https://teamtreehouse.com"></a>
        </div>
        <script src="app.js"></script>
    </body>
</html>

2 Answers

Christopher Villarreal
Christopher Villarreal
6,603 Points

Hey there so I just reviewed the challenge and I figured out what is causing your code to not work as desired. On the 2nd part of that challenge it is asking for you to store the value, that is in the variable 'inputValue', into the <a> tag. I went ahead and provided the code for you if you'd like to view it.

let inputValue = document.querySelector('#linkName').value;

document.querySelector('#link').textContent = inputValue;
Sondre Fjellving
Sondre Fjellving
4,700 Points

Thank you so much Christopher! This worked, wohoo!

The second line is the issue. You are getting the textContent of the #link anchor and storing it into the value of the inputValue.

What you want to do is the other way around:

let inputValue =  document.querySelector('#linkName').value;
document.querySelector('#link').textContent = inputValue;
Sondre Fjellving
Sondre Fjellving
4,700 Points

Thank you for taking your time to explain why it is like this! It's an eye opener for me haha. Have a good day coding Robert! It worked btw ;)