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

Posted by jameso
jameso
8,569 Points

JavaScript and the DOM. How come this code works, but this alternative will not work?

How come my code below does not work, but the following code does:

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

let getLink = document.querySelector("#link");

getLink.textContent = inputValue;

In my code below in attempt to write more 'dry' code, I target the textContent of the a tag, and directly set it to: 'getLink' , but when I try and parse inputValue the textContent of 'getLink' it does not work.

As far as I can tell both of these code snippets should do the same goal, setting the textContent of getLink to the string of inputValue...

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

getLink = inputValue;
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>

3 Answers

Laura Leistad
seal-mask
.a{fill-rule:evenodd;}techdegree
Laura Leistad
Full Stack JavaScript Techdegree Student 6,063 Points
Laura Leistad
.a{fill-rule:evenodd;}techdegree
Laura Leistad
Full Stack JavaScript Techdegree Student 6,063 Points

I'm not sure about the use of textContent, but you can do it in two lines of code rather than three using what is talked about in the videos:

let inputValue = document.querySelector('input').value; document.getElementById('link').innerHTML = inputValue;

Atman Shah
Atman Shah
1,510 Points
Atman Shah
Atman Shah
1,510 Points

Hey!

Please retry, it worked for me.

jameso
jameso
8,569 Points

Did you test the code in the attached app.js file? because it brings back an error for me saying that the 'a tag has not been set.'

Atman Shah
Atman Shah
1,510 Points
Atman Shah
Atman Shah
1,510 Points

I tried, it works..