Refactor 1: Not Here to Complain, but Learn

Question

I realize there are many who are frustrated with how hard this is to understand.

But I want to understand it first, before I complain. I understand his concept but I get lost in what is being called where.

This in particular

  function createElement(elementName, property, value) {

    const element = document.createElement(elementName);
    element[property] = value; // brackets allow you to grab data assigned to 'property'
    return element;


  }

  function appendToLi(elementName, property, value){

     const element = createElement(elementName, property, value); 
     li.appendChild(element);
     return element;

   }

Where are elementName, property and value being called in these two functions? Or even anywhere else in the file? They appear invisible?

How does the JS interpreter know which is which?

Can someone make an outline of what is calling to what? Seeing what is called into what becomes easier discombobulated. Could someone make an outline of what is happening as well. (Feel free to use pictures, seriously).

P.S. I understand how OOP works, I want to understand the flow of what he did first before being referred to a whole other class.

Here is the flow of what I understand so far....

1.) form.addEventListener is called when button is clicked and gathers input from the user 2.) function createLI creates elements 3.)function CreateElement(elementName, property, value) Where does it gather the elements ??? 4.) appendToLi How does it gather what it needs form the previous????

Please provide an example if possible (i.e. "let's this element a").

Answer 1 · 2018-07-10T19:12:41Z

July 10, 2018 7:12pm

Hi there, Greg Schudel! I can take a stab at it. But part of the problem with the code that you show above is that it doesn't show any of the original calls to the createElement function which is what kickstarts this whole chain of events. Let's take a look at one of the places where this happens.

If you take a look at 8:00 into the video on line 60, you will see this:

const editButton = createElement('button', 'textContent', 'edit');

This line calls the createElement function and the "button", "textContent" and "edit" are sent into the function. The arguments (things being sent in at the call site) will line up 1-to-1 with the parameters elementName, property, and value. This means that while the function is being executed, elementName will be assigned the value of "button", property will have the value of "textContent" and "edit". So let's take a look at that function and what the values will contain when it is called and passed these things:

  function createElement(elementName, property, value) {
    // elementName = "button"
    // property = "textContent"
    // value = "edit"

    // equivalent to const element = document.createElement("button");
    const element = document.createElement(elementName);
    // equivalent to element[textContent] = "edit";
    element[property] = value;

    // return the element we just made which should look like this
    // <button>edit</button>
    // the textContent is very really the text content between the button tags
    return element;
  }

The appendToLi() works in the same way. At 10:17, you can see the same button there, but this time it sends the information to appendToLi. The only real difference here is that the appendToLi calls the createElement function and forwards that information it just got over to that function. But again, that function returns an "edit" button. Then it takes the resulting button which we said should look like <button>edit</button> and appends it to the list item.

Hope this helps!

Welcome to the Treehouse Community

Looking to learn something new?

Greg Schudel

Greg Schudel

Refactor 1: Not Here to Complain, but Learn

1 Answer

Jennifer Nordell

Jennifer Nordell

Greg Schudel

Greg Schudel