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>

<Removed>

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

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

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

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.

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!

Dave was a much better teacher.

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.

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!!!

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

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.

not clear at all, and it's quite upsetting.. everything else was fine until I started JavaScript :(

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;

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.

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.

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

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;

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

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!

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.

Thank you!!!

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

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?

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.

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

Agreed

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.

Also,

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

will work.

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?

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

Well this was confusing

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

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; 

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

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.

let inputValue = linkName.value;

link.textContent = inputValue;

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

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!

same problem. this course challenges is so confusing

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.

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.

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!

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.

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

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

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.

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.

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...

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!

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

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

Well that was weird.

this worked for me. :

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

I agree with you Erik!

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.

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

Also,

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

will work :)

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.