JavaScript JavaScript and the DOM Making Changes to the DOM Modifying Elements

Zachary Luke
Zachary Luke
Full Stack JavaScript Techdegree Student 7,294 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 45,651 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
Zachary Luke
Full Stack JavaScript Techdegree Student 7,294 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 45,651 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
16,546 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.