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

Can anyone help please!!!!!!!!!!

const myHeader = document.getElementById("myHeader");
I'm so struggling with the basics of the DOM, and some just use more confusing code. Can someone help me understand why the above line even exists

3 Answers

Hi jasOn!

const myHeader = document.getElementById("myHeader");

Targets the element with the id of "myHeader" and stores it as a constant variable.

Then, after that, you can manipulate that element by referencing myHeader.

Like this:

const myHeader = document.getElementById("myHeader");

myHeader.textContent = "Some New Replacement Text";

And yes, even though it is constant, you can still manipulate it (change its properties and values), you just can't assign some other element to myHeader.

And hopefully it makes perfect sense that it is way less typing to reference myHeader (let's say for example you have to do multiple manipulations to that element) as opposed to have to type document.getElementById("myHeader") every time further in your code.

For example (using mh instead of myHeader for even less typing):

const mh = document.getElementById("myHeader");

mh.textContent = "Some New Replacement Text";
mh.style.color = "blue";
mh.style.fontsize = "30px";
mh.style.backgroundColor = "lime";
// Etc...

Otherwise you would have this:

document.getElementById("myHeader").textContent = "Some New Replacement Text";
document.getElementById("myHeader").style.color = "blue";
document.getElementById("myHeader").style.fontsize = "30px";
document.getElementById("myHeader").style.backgroundColor = "lime";

Which is certainly grossly redundant and overly verbose and much less DRY (Don't Repeat Yourself).

More info:

https://dzone.com/articles/software-design-principles-dry-and-kiss

I hope that helps.

Stay safe and happy coding!

You know the top part is so helpful thankyou, I'm just going through the rest of what you wrote now.. I'm in the UK so if there's a gap in replies sometimes its obviously the time difference.

edit:-
That's what I thought that I'm having to call document.getElementById each time.

Oh yeah that's great, really easy to understand thanks. <p id="myText"></p>
myText.textContent = "This is my added text";
myText.style.color = "white";
myText.style.fontSize = "45px";
myText.style.backgroundColor ="grey";

No worries.... TMI, but I'm just up checking messages wilst using the lavy!?! LOL What part are you from? I'm actually a big fan of the UK! Probably also TMI, but I'm a big fan of Viz magazine, Red Dwarf, Sing Street,, etc.. I played drums in a Reggae band years ago and I had a Volkswagen bus painted in Reggae colors, but my vanity/custom license plates said "CLUB UK"!?! :)

haha... I'm in west midlands, oh red dwarf I could recite every line... Its one of those series that you wish would go on and on.....

Yo jas0n,

Since you are a big fan of Red Dwarf, I recommend checking out Resident Alien on the SyFy channel - it is SOOOOOO funny!?! They just wrapped up their first season and every episode was super great. The cast and writing are both PHENOMENAL. It aired on SyFy, but the reruns are migrating to the new Peacock network.

BTW, if you ever saw Dodgeball, the lead actor of RA was the guy who thought he was a Pirate. He was also in Firefly and Rogue One.

More info:

https://www.syfy.com/resident-alien

https://www.syfy.com/syfywire/syfy-renews-resident-alien-for-season-2

I am also a big fan of MST3K, of course - one of my all-time favorite shows, for sure!!!

And The Young Ones!

And Alexie Sayle!

Some of my favorite bits from Red Dwarf:

1) When Cat has to "use the bushes" at the end of "Backwards" (One of the funniest scenes ever - it's like the whole episode was just a setup for that punchline!?!) (That was the first episode I ever saw and it is still one of my favorites!) Also, Cat takes from the donations tray in the pub, "What the hell, it's for a good cause!?! (Ahahahaha!?!) "It's not a brawl, it's a barroom tidy!?!" (LOL) And when they debate which universe makes more sense - Hitler, Santa Claus, St. Francis of Assisi - is SOOOOO classic!?!

And of course, this whole exchange:

Lister : You ever see "The Flintstones"?

The Cat : Sure.

Lister : Do you think Wilma's sexy?

The Cat : Wilma Flintstone?

Lister : Maybe we've been alone in deep space too long but every time I see that show, her body drives me crazy. Is it me?

The Cat : I think, in all probability, Wilma Flintstone is the most desirable woman who ever lived.

Lister : That's good, I thought I was going strange.

The Cat : She's incredible.

Lister : What do you think of Betty?

The Cat : Betty Rubble? Well, I would go with Betty... but I'd be thinking of Wilma.

Lister : This is crazy. Why are we talking about going to bed with Wilma Flintstone?

The Cat : You're right. We're nuts. This is an insane conversation.

Lister : She'll never leave Fred and we know it.

OMG - Ahahahaha!?! So funny!?!

2) When LIster wants to put ketchup on lobster and Kryton's head explodes (twice!?! LOL)

3) When Kryton is running diagnostics on Rimmer's hologrammatic projection unit and a worried Rimmer asks what results are and Kryton asks. "Are you the sort of person that likes your truth naked and unvarnished, or are you of the ilk last likes to live in blissful ignorance of the nightmare you are facing!?!" OMG - SOOOOO funny!?!

4) Kryton and Kristine Kochansky are trapped in the ship's air-conditioning system and Kryton is trying to tell her that Lister is in love with her and she, like, "I don't see it!?!" And Kryton responds with, "Don't you see how he looks at you?"He looks at you the way a starving man looks at a packet of peanuts. He can't wait to get the wrapper off and taste the salty goodness!?!" (GENIUS!?! LOL)

5) Two Words: Talkie Toaster ("Would you like some toast?!?")

6) Rimmerworld

8) And, of course, that their swearwords/put-downs of choice are smeg and smeghead!?!

I have read all the books, too, and they were just as good - for sure!!!

And I have the boxed set of the whole series on my laptop.

BTW, my Mom's favorite movie (and one of mine, too) is Shirley Valentine!?!

Anyway, it's very nice to make your acquaintance!!!

-Pete