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

Set the text content of the a tag to be the value stored in the variable inputValue.

I not understand

app.js
let inputValue = document.querySelector('#linkName').value;
let link = document.querySelector('#link');
let content = document.querySelector('#content');

link.addEventListener('click', () => {
  inputValue = link.innerHTML;
});
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>
Erik L
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Erik L
Full Stack JavaScript Techdegree Graduate 19,470 Points

I'm glad to see that Im not the only one having problems understanding the videos and quizzes for this section, I feel some things could have been explained better

Mark Del Mar
Mark Del Mar
Courses Plus Student 5,167 Points

As many have stated in this thread, I've had little to no problems until this section of the course. I don't know what it is about Dave, but he teaches so much better. No offense to Guil. There's been several times I'll write something down only to have him say "this isn't really used anymore" or "don't worry about understanding this".

42 Answers

Rachel Flores
Rachel Flores
2,424 Points

This entire course is very confusing. The JavaScript courses were excellent, but the challenges and videos in this one are not clear.

Keith Carrillo
Keith Carrillo
6,909 Points

I know there are other teachers on the subject on TTH and some vids on youtube can help when its gets a little confusing. Try going to the tracks under Javascript & Jquery for another teacher though.

Martina Her
Martina Her
2,168 Points

I thought I was the only one. I miss the way Dave taught. The challenges in this series confuses me like..."did they even taught us that?" Oh well. Thank goodness for the community!

MAisam Bakhshi
MAisam Bakhshi
7,210 Points

Dave was a much better teacher.

Joseph Groark
Joseph Groark
24,499 Points

I fully agree, no clear objectives are set. I really think these great ways to work with the DOM are ruined by a lack of clarity.

holy shit i thought i was the only one.

Dillon Reyna
Dillon Reyna
9,531 Points

Man I'm really glad to hear that it's not just me!

It's bad that this comment was posted on July 15th and thy have done NOTHING to try and change it!!!!

I believe this and it is a problem, it is very demotivating for me now and I hardly can master another failed day. So I push thought this hoping there is light at the end of the tunnel, I dont see it though!!!

Nicholas Wallen
Nicholas Wallen
12,278 Points

Agreed completely. It's not that this stuff is hard persay, but theres something different about how they are presenting the information versus all of the other courses I have taken

Britney Aronson
Britney Aronson
11,584 Points

This whole course is for shit. I haven't had any issues comprehending what is being taught at treehouse until now. Please redo this whole damn course.

Michael Davis
PLUS
Michael Davis
Courses Plus Student 12,508 Points

Good Morning!

You're over thinking it! The challenge, 2nd step, just wants you to set the text of your link to the value in your inputValue. You already stored your inputValue (#linkName.value), this challenge is just wanting you to assign that string to the anchor's text value.

let inputValue = document.querySelector('#linkName').value;
let anchor = document.querySelector("#link");

anchor.innerText = inputValue;
Keith Carrillo
Keith Carrillo
6,909 Points

Quick question why does the question ask to set the a tag to be the value stored in the inputValue.. I think it might need to be reworded.

Michael Davis
Michael Davis
Courses Plus Student 12,508 Points

The textBox that we gave the ID of linkName contains the name for the link. We gave the a tag an ID of link, and by setting it's innerText to the value stored in the inputValue variable (which is getting the text we entered into the textbox) we can dynamically update the link text.

Linda Gomes
Linda Gomes
3,584 Points

I am struggling with this challenge and I don't understand where is the let anchor coming from?

arik
arik
5,791 Points

What I don't understand is why I have to reverse the order of storing the text content of a tag into inputValue to pass the challenge.

What is the difference between these two codes? I thought that the first is storing, while the second one is assigning. Why did I fail on the challenge using the first code ?Any explanation is highly appreciated, many thanks in advance.

inputValue = a.textContent;

a.textContent = inputValue;
Michael Davis
Michael Davis
Courses Plus Student 12,508 Points

arik, the equals = is stating that the item on the left is assigned the value on the right. Thus in the sample you provided:

inputValue = a.textContent;

a.textContent = inputValue;

The first statement is stating that the variable "inputValue" is being assigned the value stored in a.textContent. Whereas in the second statement, it is stating that a.textContent is being assigned the value of stored in inputValue.

For example:

let myVar = "Cat";
// myVar now contains the string value `Cat`

let myVar2 = "Dog";
// myVar2 now contains the string value `Dog`

myVar = myVar2
// myVar now contains the string value `Dog`

The single equals is an assignment operand, the item on the left is set to the value of the item on the right. If this doesn't clarify the issue, please feel free to clarify the question and ask again :-D

Lewis Crichton
Lewis Crichton
292 Points

let inputValue = linkName.value; link.textContent = inputValue; // assigns value of link to the text of anchor

I just think the question could have been worded a little better, but that's just my opinion!

Because I also got stuck initially like many others, until I saw your post. Then I understood what it was asking for!

Tyler Durden
Tyler Durden
2,406 Points

It needs to be reworded, the wording is so vague and bad, and I' m not even a beginner, I'm a junior/senior in a Computer Engineering major but brushing up on my JS and I couldn't even figure it out, not due to the complexity of the problem but the wording/instructions being so poor.

I've never seen anchor or innerText up to this point. How can that be the answer if it has not been taught yet.

Michael Williams
Michael Williams
Courses Plus Student 8,059 Points

Hey Nathaniel Skinner, .innerText was covered in the first video in this section. You can find it here: https://teamtreehouse.com/library/getting-and-setting-text-with-textcontent-and-innerhtml

Regarding the anchor variable comment, I thought the same thing as you, but remember, it's a variable. So you could name it anything you wanted. Michael Davis just went with anchor since the the a tag in html refers to anchor.

I know this section is confusing, but stick with it, and it'll get easier. I also found this thread pretty helpful: https://teamtreehouse.com/community/for-those-confused-about-this-course-read-this-for-a-full-explanation

Hope this helps.

I am not sure if this is correct, maybe I missed it somewhere, but .innerText was not covered?

Sylvia Castro
Sylvia Castro
9,944 Points

This for sure was no where in the video for me to even know what to do. I think I've been pretty good at learning and getting all of the quizzes until now. Unfortunately we are mid way into 2019 and nothing has changed. For the amount of money we pay, this should be better structured or at least updated.

Keith Carrillo
Keith Carrillo
6,909 Points

This question has to be reworded. I read it as set the a tags content inside of the variable inputValue. I kept getting it wrong until I realized this.

preach

I agree that this is badly worded. The quizzes in this whole course have been much more vaguely-worded than those in other courses I've taken.

Is there a way to flag this question? This was a poorly worded question and it clearly has confused a lot of people.

WTF is up with this question. I got more confused entering the 2nd part of the challenge. Usually, Treehouse does a good job of explaining things better. Not so much with this course.

Brandon Vaught
Brandon Vaught
12,343 Points

Also,

let inputValue = document.getElementById("linkName").value;
let anchor  =  document.getElementById("link"); 
anchor.textContent = inputValue;

will work.

Saqib Ishfaq
Saqib Ishfaq
13,912 Points

brilliant! simple and easy .thanks

ok, what is the difference between two of those methods are querySelector and getElementById? We only wanted first one element or specified the id. Is do not matter to chose those methods?

Robert Hemfelt
Robert Hemfelt
7,303 Points

Glad I was not the only one extremely confused by the wording of this question, thanks for the help!

Ivan Peric
Ivan Peric
8,375 Points

Well this was confusing

Juan Mercedes
Juan Mercedes
6,478 Points

I agree, since some of the questions are vague, is natural we tend to overthink the solution.

Diana Ci
Diana Ci
18,672 Points
let inputValue =  document.getElementById ('linkName');
inputValue = linkName.value;
let anchor = document.querySelector('a');
anchor.textContent = inputValue;

or

let inputValue =  document.getElementById ('linkName').value;
let anchor = document.querySelector('a');
anchor.textContent = inputValue;

or

let inputValue =  document.getElementById ('linkName').value;
let anchor = document.getElementsByTagName('a')[0];
anchor.textContent = inputValue; 
Anne Donald
Anne Donald
9,847 Points

Thank you for your help on this one, I was getting a little confused too with the wording!

arik
arik
5,791 Points

Wow, thank you very much Michael Davis:) Now I get the point, I think what made me confused is the direction of the challenge that asks to "store"the content of a tag into the variable inputValue (but to "store" something we need to still use var, let, or const keyword isn't it? or not? :-D). It made me think that I need to store "a" into var inputValue. Anyway need to learn more, and once again thank you very much, everyone in this forum is really nice and helpful.

Lewis Crichton
Lewis Crichton
292 Points

let inputValue = linkName.value;

link.textContent = inputValue;

This whole thing hurts my brain. In a bad way. Please rephrase/rework these questions.

Ernie Van Duyne
Ernie Van Duyne
5,335 Points

I agree with everyone here. This course needs to be done over. The challenges do not match up well with how it is being taught here.

I have never had this with any the other TeamTreeHouse courses.

It also looks like nobody from Team Treehouse is monitoring this or they would do something!

nicolo orcine
nicolo orcine
3,138 Points

same problem. this course challenges is so confusing

Arpana Roy
Arpana Roy
2,028 Points

Previous videos and their challenges were co-related , but this part is not at all related. I mean the videos teach something else but the questions are different , and I have to post it in the community every time. Not sure how to go forward.

Here I was, almost pulling out my eyes because I thought I was going insane, felt like dumb-rock, till I found out literally hundreds of other people were experiencing the same problem. Yes, this track really does suck, sorry for my language but I'm beyond angry that they haven't tackled these issue's yet.

Tyler Dix
Tyler Dix
14,230 Points

December, 2018 update: This is still an issue. They may have included a link TO A PREVIOUS SECTION which I watched for clarification, and it didn't help clarify. Treehouse, please listen to your community and make some meaningful adjustments! Honestly trying to solve this, and then reaching to outside resources, and then eventually copying/pasting the solution isn't an ideal way for a student to learn.

Michael Williams
Michael Williams
Courses Plus Student 8,059 Points

I've been where you are. I don't know if it's because the DOM topic is a bit more challenging, the explanations aren't as good, or a bit of both, but this course is definitely harder than the others. I'd message support, which is what I did. I pointed them to this thread to gauge how maddening this course can be for people.

My response may be a little dated, but it seems some of you are getting a little discouraged. If this stuff was easy everyone would be doing it!. Speaking from my personal perspective I've reached this point in this course in about a week your mileage may vary. The point is if I put you in a Spanish classroom for 8 hrs a day for one week and then threw you into a room full of native fluent Spanish speaking people.....Do you think you could carry on a conversation with them? Most likely NOT! So, the point to the story is, hold your head hi and don't let this stuff get you down! You can do it if you dedicate yourself to it! It's a grind and your going to have good days and bad days but don't give up!! Do what you can and then get on google and research ask the question just like you have been doing and when all else fails, look up the answer. Study the code line by line and when you come to something you don't understand Stop! research it and ask questions before you move on! I promise you once you get your first language down moving forward with this craft becomes easier! My first programming language was python. HOLLY COW was if difficult to even get started.....Questions like this would stop me dead in my tracks and I wouldn't even know where to begin. ...But what python taught me, that can be applied to other languages. is how to approach problems and break them down to their simplest forms. So, far Javascript and any kind of development is the same way! Every program no matter what it is! Starts with simply declaring a variable.....then a loop.....maybe a function..then one function turns into 10 then 50. The point is to start small and build up.....Brick walls aren't only build from the ground up...they are built one brick at a time!

Michael Williams
Michael Williams
Courses Plus Student 8,059 Points

I think this is helpful and encouraging. I think one thing I struggled with was the transition from js to the DOM concepts. While it takes time and practice to understand them, I do still believe there could be improvements to this course to make the transition easier. One thing that helped me was learning about this topic from other teachers and materials. For example, I've found this Web Dev Bootcamp course from Colt Steele massively helpful. It's only $10 (udemy has a ton of sales all the time) and a great supplement to everyone's learning.

let inputValue = document.querySelector('input').value;
link.textContent = inputValue;

I am with pretty much everybody here. This guy sucks in comparison. Free youtube videos literally taught me more in an hour then 10 hours of banging my head against the keyboard trying to figure out what this guys trying to tell me.

David Ferenc
David Ferenc
6,993 Points

Why I am thinking that teachers do not read this comments at all? Maybe its time to try different course...

Rick Clark
Rick Clark
Courses Plus Student 10,838 Points

That's what I did. Took the full CSS Basics, CSS Selectors and Html courses and I'm having an easier time the 2nd time through the DOM courses.

let inputValue = document.getElementById("linkName").value;
let anchor    =  document.getElementById("link");                                    
 anchor.innerHTML = inputValue;

It doesn't matter whether you write it as anchor.innerText = inputValue ;   either

let anchor = document.getElementById("link");
anchor.innerHTML = inputValue;

this is correct, but I had help from you, I hope this will make sence later on

Lewis Crichton
Lewis Crichton
292 Points

let inputValue = linkName.value; link.textContent = inputValue; // assigns value of link to the text of anchor

One point on losing to learn JS from here and guess what i saw all confused, I think the question need to be reworded and made clear.

Tuan Phan
Tuan Phan
10,825 Points
let input = document.querySelector(`#linkName`);
let inputValue = input.value;
let anchor = document.querySelector(`#link`);
anchor.textContent = inputValue;

This worked for me.

This whole DOM track has been confusing to me. Glad I were not the only one. Half of it feels pointless and literally does the same thing. And I haven't really grasped all of it either. I just prefer using jQuery, even though I JUST watched these videos, I barely undertand it.

Jarett sisk
Jarett sisk
7,522 Points

the DOM track has been confusing to me aswell. I think part of it is do to the change of teachers. but this question on specific had me at a stand still. my first thought was to just re write the code so that im setting any potential text from the a tag equal to original inputValue variable. I see now that this is definitly not the case

Treehouse, please use similar approaches to lessons with Dave. I flew through those but once i got here it became confusing. Teach a lesson and then slightly veer off into a coding quiz that isn't the same stuff but the same information...

Jerome Heaven
Jerome Heaven
8,641 Points

Seriously glad to be a part of this community. The wording of this question is confusing. Thanks for your help everyone in here.

It's a real shame they haven't updated this question / lessons yet!

Antonio De Rose
Antonio De Rose
20,884 Points

I agree that the first question does not have any issue with the reading, however, the second does, gives a little bit of mis-interpretation, however, when I get the error, I did read as many times, till I got to understand, that what the question is about.

One thing, the requirement giver, will not always, the same from person to person.

you have an 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>

<!--and if you break the questions-->
<!--q1) Store the value of the text input element in the variable inputValue.-->
<!--I do not think anyone would have an issue-->
let inputValue = document.getElementById("linkName").value;

<!--question 2-->
<!--Set the text content of the a tag to be the value stored in the variable inputValue.-->
<!--break the question, set the text content of the a tag, there is only one a tag, that too could be retreived
by using the ID and the property we have to target from JavaScript would be innerHTML,
and now, break the question again, with an additional step, set the text content of the a tag, to be the
value to be stored, in the variable inputValue-->
document.getElementById("link").innerHTML = inputValue
ivana kantnerova
ivana kantnerova
15,932 Points

let inputValue = linkName.value; link.textContent = inputValue;

Well that was weird.

Jarett sisk
Jarett sisk
7,522 Points

this worked for me. :

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

Yeah I want to add my name to the list of people who found this section on the DOM confusing. There's stuff in the exercises that isn't really demonstrated in the videos and some of the questions are really confusingly worded.

Ben Kaufman
Ben Kaufman
6,813 Points

You need to declare the link as a variable before you mess with it,

So declare a variable called 'link' and connect it with the <a> element

then access the textContent property of this variable and make it equal to the input

TARIQ ALREHILY
TARIQ ALREHILY
14,822 Points

Also,

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

will work :)

Gareth Alexander
seal-mask
.a{fill-rule:evenodd;}techdegree
Gareth Alexander
Full Stack JavaScript Techdegree Student 2,943 Points

I found this hard to follow as well. I think it this course is better for people who have done some Javascript and DoM and are just looking to refine some fundamentals. As someone who has never coded before I found this really hard to follow along.