Selecting The Current Order

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

What we will be doing

In our project we havs some orders in the right sidebar, and soon we will generate new ones randomly. Just before we move on, let's discover how things will work so you can picture what we will be doing:

Once the game has started, our orders will begin to come in and show on the right. The chef, who is the player, will then click on an order to begin working on it, which will then move this order into the working on section.

And this is what we will be doing now. Later, we will then go further by clicking on a particular pizza in the working on section, this will then display the method and set it as the current pizza in the kitchen.

Selecting orders

We can now just focus on clicking on an order and moving it into the working on section. As you may have guessed, to do this we are going to create a function:

// …
function selectCurrentOrder() {} // create new function
createOrdersList();

Then to call this, we need to listen for a click on the orders. This can be done when we create the orders in the createSingleOrder function:

function createSingleOrder(order) {
  const orderWrapper = document.createElement(‘div’);
  orderWrapper.className = ‘order_wrapper’;
  // listen for the click event:
  orderWrapper.addEventListener('click', selectCurrentOrder);
  // …

Give this a test by logging the clicked on element to the console:

function selectCurrentOrder(e) {
  console.log(e.target);
}

You will see in the console that clicking an order can show the inner contents of the order, such as the li elements. This is not really what we want, we don’t want to select individual pizzas, we need to select the full order div.

To understand this better, let's take a look at the generated HTML for our orders:

<div class="order_wrapper">
  <h4>Order: 1</h4>
  <ul>
    <li>
      <span>1 - </span>
      <span>Ham and Pineapple</span>
    </li>
    <li>
      <span>2 - </span>
      <span>Pepperoni</span>
    </li>
  </ul>
</div>

If we click on the order_wrapper div, that is great and exactly what we need. But if we click on the li, or a pizza name span, we need a way to climb up through the elements and find out which order_wrapper was clicked on.

A loop can help us do this. We can store the element which was clicked on, and keep checking to see if the parent element is the order_wrapper. Or an easier way is to use an element method called closest.

The `closest()` method

The closest method will take an element, such as the one we click on, and climb up towards the document root, through all the parent nodes, until it reaches a selector match. This selector can be a class, an ID, or an element name, just as we can with querySelector:

function selectCurrentOrder(e) {
  // 1. store the element we click on
  let element = e.target;
  // 2. find the closest element with the class of order_wrapper:
  const orderWrapper = element.closest('.order_wrapper');
  console.log(orderWrapper);
}

Now regardless of what part of the order we click on, it always climbs up to the parent order_wrapper element.

Handling no matches found

If no matches are found with the closest method, we get back null, so we can also check against this before adding our order to the working on section:

function selectCurrentOrder(e) {
  let element = e.target;
  const orderWrapper = element.closest('.order_wrapper');
  // 1. add conditional check
  if (orderWrapper !== null) {
    // 2. select working on section
    const orderDiv = document.querySelector('#working_on');
    // 3. add order to section
    orderDiv.appendChild(orderWrapper);
  }
}

Multiple orders should now add to working on section when clicked.

Checking if an order is already selected

This is great however, we only want to be working on a single order at a time. We need a way of checking if an order is already selected.

A way of doing this is to first access the working on div:

function selectCurrentOrder(e) {
  console.log(document.querySelector('#working_on'));
  // …

Access the children property:

function selectCurrentOrder(e) {
  console.log(document.querySelector('#working_on').children);

This will return all the child elements nested inside. Test this out by clicking on all three orders and seeing the results in the console:

// first click only has h3
HTMLCollection [h3]

// second click has h3 and previous order
HTMLCollection(2) [h3, div.order_wrapper]

// third click has 3 child elements
HTMLCollection(3) [h3, div.order_wrapper, div.order_wrapper]

This number of child elements can now be used to stop the function if the number of child elements is greater than one. Change the console.log to be an if statement:

function selectCurrentOrder(e) {
  if (document.querySelector('#working_on').children.length > 1) {
    return;
  }
  // ...

Removing event listeners

The final thing is to remove the event listener from the order. We no longer need this after we move the event to the working on section. This can be removed just before we add the order to the DOM:

function selectCurrentOrder(e) {
  // …
  if (orderWrapper !== null) {
    // remove event listener:
    orderWrapper.removeEventListener('click', selectCurrentOrder);
    const orderDiv = document.querySelector('#working_on');
    orderDiv.appendChild(orderWrapper);
  }

Event listeners should be removed when no longer needed. It helps with performance since the browser no longer needs to do an unnecessary task, and to eliminate unexpected behaviour.

Next, we will cover selecting the pizza we are going to be working on.

What we will be doing
Selecting orders
The closest() method
Handling no matches found
Checking if an order is already selected
Removing event listeners