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 DOM Scripting By Example Adding and Removing Names Removing Names

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Posted by Saqib Ishfaq
Saqib Ishfaq
13,912 Points

can please some1 break this down for me, i know its to call the function createLI and store it in variable

const li = createLI(text);

also, why are we passing the parameter (text) to this function and is it the same value which we passed in

li.textContent = text;

just any simple explaination would be appreciated please!!

2 Answers

Tobiasz Gala
seal-mask
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points
Tobiasz Gala
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points

Text in function createLI is just placeholder for whatever you pass to it. The problem in the video is that variable we are passing to the function has the same name. Also, variable text is inside eventListener so it is not "seen" be function createLI

Let rewrite function to see it more clear

function createLI(text) { // text holds input.value
  li.textContent = text; // li.textContent = input.value
}

ul.addEventListener('click', () = > {
  const text = input.value; // text has the same name as paramater of createLI but it is something different
  const li = createLI(text); // we pass text variable to the function it looks like this const li = createLI(input.value)
});
Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

ahhh i think i just got it, thanks tobiasz so,

function createLI(anything){
}

and when we put that "anything" to pass as an argument to call the function, it gives us the input value which we type in and store it in //const li 

const li = createLI(anything);   // which would be in this case input.value
andressardou
.a{fill-rule:evenodd;}techdegree
andressardou
Full Stack JavaScript Techdegree Student 3,218 Points

very helpful. thank you!

Tobiasz Gala
seal-mask
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points
Tobiasz Gala
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points

In the video you can see that text is the name of parameter of the function createLI. 

    function createLI(text) {
     // other code
     li.textContent = text;
    }

Below you have variable which holds input field's value

    const text = input.value;
    const li = createLI(text);

This may look wierd but let me explain code with the comments and you will see that this is just simple logic. Follow the numbers

    // 3. this function has parameter "text"
    function createLI(text) {
     // other code

     // 4. here we are not putting variable text but the parameter text
     // 5. it is confusing because it has the same name
     li.textContent = text;
    }

    // 1. here you have variable text
    const text = input.value;

    // 2. you are passing whatever is inside this variable to the function
    const li = createLI(text);
Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

thanks for your answer! i do understand whats happening but struggling to connect the dots when it comes to make it a logic behind it, i know its just too simple but i cant fully grasp it right now. so just to clarify, as far as my understanding goes... are we passing a parameter here 

function createLI(text) {
}        // as text which is what exactly? a variable ?or just something to pass to, and return its value and store it as list item

const li = createLI(text)

and here we just stored the value in variable li, from the function :/ i do understand whatever we type in input field should be in the li, so that text can be stored in 

const text = input.value;

does it mean its actually this in a way

function creatLI (li.textContent = text){
} //