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 Zachary Luke
.a{fill-rule:evenodd;}techdegree seal-36
Zachary Luke
Front End Web Development Techdegree Graduate 17,646 Points

textContent keeps returning 'null', trying to assign it to a variable.

Trying to get .textContent structured correctly. Specifically, on line 2 in the app.js file, it keeps returning 'null', and specifying there's something incorrect with document.querySelector('a.link').textContent.

I've tried typing the code with document.getElementById() as well as moving the placement of .textContent around, but nothing seems to work.

app.js 
var inputValue = document.querySelector('input').value;
var inputValue = document.getElementById('a.link').textContent;
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

Clayton Perszyk
MOD
Clayton Perszyk
Treehouse Moderator 48,723 Points
Clayton Perszyk
Clayton Perszyk
Treehouse Moderator 48,723 Points

getElementById expects an Id value to be passed in. You are passing a chained value and that will not work (a.link means element a with a class link).

Zachary Luke
.a{fill-rule:evenodd;}techdegree seal-36
Zachary Luke
Front End Web Development Techdegree Graduate 17,646 Points

Getting rid of the chain results in: "You need to select the 'input' element and assign it to the variable inputValue"

var inputValue = document.querySelector('input').value; var inputValue = document.querySelector('#linkName').textContent;

When I change the '#linkName' to 'input', it returns with "null". (This has become quite a complex challenge!)

Clayton Perszyk
Clayton Perszyk
Treehouse Moderator 48,723 Points
Clayton Perszyk
Clayton Perszyk
Treehouse Moderator 48,723 Points

Zachery Luke,

select linkName and assign value to inputValue. Then select link and assign input value to it.

e.g.:

document.querySelector('query').textContent = someValue
Charles Badger
Charles Badger
18,189 Points
Charles Badger
Charles Badger
18,189 Points

querySelector uses css selectors to select DOM elements. If you wanted to select the anchor tag with the id "link", you would use document.querySelector('#link'). There's no need to chain anything when selecting an ID, because IDs are unique. If you wanted to use getElementById, you would type document.getElementById('link') and just pass the ID name as a string as a parameter.