Element Helper Function

📝 We continue in the same project folder throughout this section.

What we will be doing

In this lesson we will create a helper function. This will involve looking at sections of our code we are repeating, and outsource it into a re-usable function. The code we are repeating is the creation of elements using JavaScript.

Looking at our code at this early stage, we already have multiple places where we are creating elements. We have the order quantity and the pizza name elements:

function createListOfPizzas(pizzas) {
  const pizzaList = document.createElement('ul');
  pizzas.forEach(function (pizza) {

    const orderQuantityEl = document.createElement('span');
    const quantity = document.createTextNode(`${pizza.quantity} - `);
    orderQuantityEl.appendChild(quantity);

    const pizzaNameElement = document.createElement('span');
    const pizzaName = document.createTextNode(pizza.name);
    pizzaNameElement.appendChild(pizzaName);

    const pizzaItem = document.createElement('li');
   pizzaItem.append(orderQuantityEl, pizzaNameElement);
    pizzaList.appendChild(pizzaItem);
  });
  return pizzaList;
}

Also, in the createSingleOrder function we create an order number element:

function createSingleOrder(order) {
  const orderWrapper = document.createElement('div');
  orderWrapper.className = 'order_wrapper';

  const orderNumberEl = document.createElement('h4');
  const orderNumber = document.createTextNode(`Order: ${order.id}`);
  orderNumberEl.appendChild(orderNumber);

  orderWrapper.appendChild(orderNumberEl);
  const pizzaList = createListOfPizzas(order.pizzas);
  orderWrapper.appendChild(pizzaList);
  return orderWrapper;
}

This is something which we need to do, and we will do many more times during this project. Each time we do this it involves three lines of code. So, we can create a function to help with this.

The functions task is to take in an element name, such as h1, and the contents, such as the innerText. Then add the content to the element using appendChild.

Creating our helper function

We begin with a descriptive function name, which we pass the element and content to. Add this above our existing functions:

function buildElement(elementName, elementContent) {}

Then build our elements inside:

function buildElement(elementName, elementContent) {
  // create element
  const element = document.createElement(elementName);
  // create content
  const content = document.createTextNode(elementContent);
  // append content to element
  element.appendChild(content);
  // return completed element
  return element;
}

Refactor the order quantity and pizza name

And next we can call this for each element we want to create, storing the returned value into a variable:

function createListOfPizzas(pizzas) {
  const pizzaList = document.createElement('ul');
  pizzas.forEach(function (pizza) {

    // 1. remove the following 3 lines:
    // const orderQuantityEl = document.createElement('span');
    // const quantity = document.createTextNode(`${pizza.quantity} - `);
    // orderQuantityEl.appendChild(quantity);

    // 2. replace with our function:
    const orderQuantityEl = buildElement('span', `${pizza.quantity} - `);

    const pizzaNameElement = document.createElement('span');
    const pizzaName = document.createTextNode(pizza.name);
    pizzaNameElement.appendChild(pizzaName);
    const pizzaItem = document.createElement('li');
    pizzaItem.append(orderQuantityEl, pizzaNameElement);
    pizzaList.appendChild(pizzaItem);
  });
  return pizzaList;
}

I have deliberately called this variable orderQuantityEl to match what we already had, meaning we do not need to make any further changes.

Next, we can replace the three lines below which create the pizza name:

function createListOfPizzas(pizzas) {
  const pizzaList = document.createElement('ul');
  pizzas.forEach(function (pizza) {
    const orderQuantityEl = buildElement('span', `${pizza.quantity} - `);

    // 1. remove the following 3 lines:
    // const pizzaNameElement = document.createElement('span');
    // const pizzaName = document.createTextNode(pizza.name);
    // pizzaNameElement.appendChild(pizzaName);

    // 2. replace with our function:
    const pizzaNameElement = buildElement('span', pizza.name);

    const pizzaItem = document.createElement('li');
    pizzaItem.append(orderQuantityEl, pizzaNameElement);
    pizzaList.appendChild(pizzaItem);
  });
  return pizzaList;
}

Refactor the order number element

Down to our next function. Replace the three lines which create an element with our new function:

function createSingleOrder(order) {
  const orderWrapper = document.createElement('div');
  orderWrapper.className = 'order_wrapper';

  // 1. remove the following 3 lines:
  // const orderNumberEl = document.createElement('h4');
  // const orderNumber = document.createTextNode(`Order: ${order.id}`);
  // orderNumberEl.appendChild(orderNumber);

  // 2. replace with our function:
  const orderNumberEl = buildElement('h4', `Order: ${order.id}`);

  orderWrapper.appendChild(orderNumberEl);
  const pizzaList = createListOfPizzas(order.pizzas);
  orderWrapper.appendChild(pizzaList);
  return orderWrapper;
}

Everything should still work as before. Now hopefully you can see some benefits, although the function has taken a few lines of code, for each new element we create we reduce three lines of code into one. And we can use it many more times during this project, saving even more code.

And it is not just about readability and organisation, a single line like this means fewer chances of typing errors too, and on larger programs a potential increase in speed.

Completed code after this lesson

If needed, here is the completed code we added to the starter file:

function buildElement(elementName, elementContent) {
    const element = document.createElement(elementName);
    const content = document.createTextNode(elementContent);
    element.appendChild(content);
    return element;
}

function createListOfPizzas(pizzas) {
    const pizzaList = document.createElement("ul");
    pizzas.forEach(function (pizza) {
        const orderQuantityEl = buildElement("span", `${pizza.quantity} - `);
        const pizzaNameElement = buildElement("span", pizza.name);
        const pizzaItem = document.createElement("li");
        pizzaItem.append(orderQuantityEl, pizzaNameElement);
        pizzaList.appendChild(pizzaItem);
    });
    return pizzaList;
}

function createSingleOrder(order) {
    const orderWrapper = document.createElement("div");
    orderWrapper.className = "order_wrapper";
    const orderNumberEl = buildElement("h4", `Order: ${order.id}`);
    orderWrapper.appendChild(orderNumberEl);
    const pizzaList = createListOfPizzas(order.pizzas);
    orderWrapper.appendChild(pizzaList);
    return orderWrapper;
}

function createOrdersList() {
    orders.forEach(function (order) {
        const singleOrder = createSingleOrder(order);
        document.querySelector("#orders").appendChild(singleOrder);
    });
}
createOrdersList();