Squash Tomato Journal — December 02, 2017–22:00

Been working early mornings instead of nights and I went to Nodevember, so I missed a few days of work due to that (I did some work, but nothing worth making a post over.

1. Pushed an update that keeps the $$$ total in view at all times and quantity and value inputs are a little easier to input values (can hit ‘Enter’ instead of clicking out of the input).
2. Fixed a bug where deleting items in random order would prevent you from removing, at least, the last item in your list. Let me explain:

Investigated and found:

If I deleted items from bottom to top, regardless of speed, the this code worked:

function updateTotalOnItemDelete(inputs) {
  inputs.forEach((input) => {
    // avoid multiple event listeners
    if (input.classList.contains('listener--attached')) return;
    // mark input as listener attached
    input.classList.add('listener--attached');
    input.addEventListener('click', () => {
      // BUG: not doing what I expect
      const index = inputs.indexOf(input);
      deleteItemFromItemsAPI(index);
    });
  });
}

However, if I tried to remove items in a random order, the index that each item represented within all the remaining delete buttons become off. In most cases, the index a delete btn represented was 1 too high.

So, with the above code, when I clicked on a delete button, it would only find the delete buttons that came before itself in the delete buttons array variable. So, if I clicked on the 9th item and then the 4th, you can see how it was seeing delete buttons:

I didn’t come to find why it did this, but I knew the solution required the most updated array of how many delete buttons there were to get an accurate index of the clicked on delete button to send to my database to remove the correct item from the user’s list (by index). So, I simply altered the above code to this:

function updateTotalOnItemDelete(inputs) {
  inputs.forEach((input) => {
    // avoid multiple event listeners
    if (input.classList.contains('listener--attached')) return;
    // mark input as listener attached
    input.classList.add('listener--attached');
    input.addEventListener('click', () => {
      // BUG: not doing what I expect
      const index = inputs.indexOf(input);
      deleteItemFromItemsAPI(index);
    });
  });
}

Boom, fucking works.