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 Dionte Barnes
Dionte Barnes
10,140 Points

Next, set the text content of the <a> element with the ID link to the value stored in inputValue.

Confused,can someone please help?

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

6 Answers

Jonathan Hermansen
Jonathan Hermansen
25,935 Points
Jonathan Hermansen
Jonathan Hermansen
25,935 Points

The code challenge ask you to insert the value stored in inputValue, not the text 'linkName'. So in your variable inputValue, you save the text from the input element with the ID set to linkName, you then need to use the variable inputValue instead of the text 'linkName':

// this variable stores the value that you can use as text in the <a>-element with the ID of link.
var inputValue = document.getElementById('linkName').value; 

// Now you use the value of the variabel inputValue as text in your <a>-element.
document.getElementById('link').textContent = inputValue;
Dionte Barnes
Dionte Barnes
10,140 Points

Thank you for your help!

Junior Aidee
.a{fill-rule:evenodd;}techdegree seal-36
Junior Aidee
Front End Web Development Techdegree Graduate 14,657 Points

I wrote the below solution for the Challenge 2 of 2 and it didn't work. Why is that?

inputValue = document.getElementById('link').textContent;

Mauricio Hernandez
Mauricio Hernandez
7,208 Points

Thank you, God bless you and your families.

Mauricio Hernandez
Mauricio Hernandez
7,208 Points

God bless everyones families.

Siddharth Pandey
Siddharth Pandey
7,280 Points
Siddharth Pandey
Siddharth Pandey
7,280 Points

I'm confused why does this: "document.getElementById('link').textContent = inputValue; " work, and why doesn't this: "inputValue = document.getElementById('link').textContent" work?

Jonathan Hermansen
Jonathan Hermansen
25,935 Points

Because the challenge ask you to set the text from the input field (id="linkName") into the a-element (id="link"). When you try to set the text from the a-element (id="link") into the input field (id="linkName"), its inserting an empty string, this is bacause the a-element do not have any value between the opening tag (<a id=...>) and the closing tag (</a>). The challenge do not ask you to set the text content of the input element, so even if the a-element had a value inside it, the challenge would not be completed.

Daniel Medley
Daniel Medley
5,948 Points

Because the challenge ask you to set the text from the input field (id="linkName") into the a-element (id="link"). When you try to set the text from the a-element (id="link") into the input field (id="linkName"), its inserting an empty string, this is bacause the a-element do not have any value between the opening tag (<a id=...>) and the closing tag (</a>). The challenge do not ask you to set the text content of the input element, so even if the a-element had a value inside it, the challenge would not be completed.

Ng Yan Xiang
Ng Yan Xiang
4,764 Points
Ng Yan Xiang
Ng Yan Xiang
4,764 Points

Why doesn't this work:

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

while this would:

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

Jonathan Hermansen
Jonathan Hermansen
25,935 Points

Because the challenge ask you to set the text from the input field (id="linkName") into the a-element (id="link"). When you try to set the text from the a-element (id="link") into the input field (id="linkName"), its inserting an empty string, this is bacause the a-element do not have any value between the opening tag (<a id=...>) and the closing tag (</a>). The challenge do not ask you to set the text content of the input element, so even if the a-element had a value inside it, the challenge would not be completed.

Hassan Al Manawy
Hassan Al Manawy
24,859 Points

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

This one won't work cause the challenge asks to store the inputValue to the <a> element with the ID "Link" and not the other way around. In other words, this will change the inputValue to whatever stored as a content within the <a> element.

while "document.querySelector("#link").textContent = inputValue;" would find the selector first and then assign the inputValue to it.

Hope that helps.

Regards,

H

Daniel Medley
Daniel Medley
5,948 Points

Because the challenge ask you to set the text from the input field (id="linkName") into the a-element (id="link"). When you try to set the text from the a-element (id="link") into the input field (id="linkName"), its inserting an empty string, this is bacause the a-element do not have any value between the opening tag (<a id=...>) and the closing tag (</a>). The challenge do not ask you to set the text content of the input element, so even if the a-element had a value inside it, the challenge would not be completed.

Ashish Dahal
Ashish Dahal
4,796 Points
Ashish Dahal
Ashish Dahal
4,796 Points

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

Robert O'Toole
Robert O'Toole
6,366 Points
Robert O'Toole
Robert O'Toole
6,366 Points

would like to know why that doesn't work as well.... that's what i tried^^^

jhon white
jhon white
20,006 Points
jhon white
jhon white
20,006 Points

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

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