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 Grady Robbins
Grady Robbins
8,249 Points

I'm having trouble Accessing the dom to store the value of an element; i'm stuck on this challenge...

I've tried a few different solutions; none of them have worked.

app.js 
let inputValue= document.getElementById('linkName').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

Adam Pengh
Adam Pengh
29,881 Points
Adam Pengh
Adam Pengh
29,881 Points

I belive this is what you're looking for. First, get the value of the input with .value, then set the text of the <a> element with textContent.

let inputValue = document.getElementById('linkName').value;

document.getElementById('link').textContent = inputValue;
Grady Robbins
Grady Robbins
8,249 Points

Thank you Adam. This works.

Its too bad i can't "see" what this code actually does because hitting the "preview" button doesn't render any distinguishable changes to the page.

For example, in this specific challenge, which is about "modifying elements in the dom"... what will i see on the refreshed version of the DOM after adding these lines of JavaScript? what "should" i see, before and after adding these lines of code?

Adam Pengh
Adam Pengh
29,881 Points
Adam Pengh
Adam Pengh
29,881 Points

Grady Robbins You're not going to see a whole lot with this. This code, as-is, will run once and get whatever text is in the input box and set the <a> text as the same value. You could expand this a little bit and add an event listener to the input so that whenever the value changes, the link text also updates. I've added a JSFiddle to demonstrate.

https://jsfiddle.net/adampengh/4nu0d6kq/