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

Richard Preske
PLUS
Richard Preske
Courses Plus Student 4,356 Points
Posted by Richard Preske
Richard Preske
Courses Plus Student 4,356 Points

almost have it but getting <a> element error.

document.querySelector("link").textContent = inputValue;

error is: Make sure that you select the '<a>' element, and set its text contect to the value of 'inputValue'

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

1 Answer

Michael Cook
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 Points
Michael Cook
.a{fill-rule:evenodd;}techdegree seal-36
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 Points

Hey Richard, the reason this is not working for you is because when you select an element with querySelector you have to use the element's css selector. Here you have passed the ID name without the # symbol, so the result would be undefined. This is what you want: 

document.querySelector("#link").textContent = inputValue;

In this case its probably more appropriate to select the element with getElementById although you certainly can use querySelector, just remember to pass the css selector to it, not just the ID or class name. Here are some examples:

// select by ID:

document.querySelector('#exampleID');

// select by class:

document.querySelector('.exampleClass');

// select by attribute:

document.querySelector('input[name="exampleName"]');

Happy coding!