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) Responding to User Interaction Functions as Parameters

Functions as Parameters?

are these just called Functions as Parameters? or are they called something else? because I can find other functions in my books but not these type

3 Answers

Oi jas0n!

I'm good. I got an appointment for my first Covid shot on Tuesday morning!?!

And I'm still rewatching Resident Alien over and over!?! LOL

So what has you the most tripped-up on the DOM stuff?!?

As far as pushing through (coping with something that seems beyond my ability):

Sometimes I just have to take a break and clear my head and return to it with fresh eyes. Other times I turn to as much 3rd-party resources as I can to round out my understanding of the material.

For the record, I struggled with understanding DOM manipulation at first, too, though. I'm way better at it now than I used to be. I'll admit that DOM transversal can be very confusing.

Some more resources on DOM stuff:

https://www.youtube.com/watch?v=Bkc7AUQ6uU4&t=130s (Derek Banas YT video on the DOM)

https://www.w3schools.com/js/js_htmldom.asp

https://www.freecodecamp.org/news/how-to-manipulate-the-dom-beginners-guide/

https://www.tutorialrepublic.com/javascript-tutorial/javascript-dom-manipulation.php

https://www.youtube.com/watch?v=y17RuWkWdn8

https://www.youtube.com/results?search_query=dom+transversal

https://fundamentals.generalassemb.ly/11_unit/dom-cheatsheet.html

https://courses.cs.washington.edu/courses/cse154/19su/resources/assets/cheatsheets/js-module2-cheatsheet.pdf

https://websitesetup.org/javascript-cheat-sheet/

https://overapi.com/html-dom

https://oscarotero.com/jquery/ (Note: THIS IS FOR JQuery and NOT vanilla JavaScript)

I also recommend just getting onto JS playgrounds, such as the ones listed here:

https://dev.to/vuelancer/free-online-code-playground-for-html-css-javascript-3kk4

And just running experiments and fully mess with the DOM (get your hands dirty)!?!

As usual, I hope that helps.

Stay safe and happy coding!

BTW, are you familiar with "Joking Apart"?!? OMG - that show has some pretty funny scenes, too!?!

There are a few really funny clips on YouTube!?! LOL

Hi Peter!
I was wondering with the DOM I heard innerHTML is unsafe? So do I use textContent or innerHTML? I found this on google:- textContents is all text contained by an element and all its children that are for formatting purposes only. innerText returns all text contained by an element and all its child elements. innerHtml returns all text, including html tags, that is contained by an element. While the above is probably true is innerHTML still used? I'm not very advanced yet on DOM but I have started reading one of your links on the DOM in w3schools, once completed I will read mdn DOM info, thanks for your help.

Hi Jas0n!

We meet again!?!

To me, a "function as a parameter" is just that, and it's not anything new or special - just a plain old JS function. But as a passes-in parameter/argument, its execution is effectively delayed until the function it was passed into executes (such in the case of when passed into an event listener as a callback function.)

I can't remember if I shared this example with you before or not:

const square = num => num * num;
const toTheSecondPower = (func, num) => { // func is a function passed as a parameter
    return func(num) * func(num); // func doesn't excute until toTheSecondPower is called
}
console.log( toTheSecondPower(square, 3) ); // square is a function passed as an argument

This logs 81 to the console.

And square is a function as a parameter that executes inside the toTheSecondPower function.

toTheSecond Power effectively, in this case (because the function passed in is square) returns:

square(3) * square(3) // 81

But you could just as easily have this:

const cube = num => num * num * num;
const toTheSecondPower = (func, num) => { // func is a function passed as a parameter
    return func(num) * func(num); // func doesn't excute until toTheSecondPower is called
}
console.log( toTheSecondPower(cube, 3) ); // cube is instead the function passed as an argument

Which will log 729 to the console.

toTheSecond Power effectively, in this case (because the function passed in is cube) returns:

cube(3) * cube(3) // 729

I hope that helps.

Stay safe and happy coding!

hi Peter! I'm trying to do fourth stage of the DOM been stuck in DOM stuff for over a month, how do you cope with something that seems beyond your ability?

How are you by the way?