Как пофиксить эти баги в моем мини приложении?

Question

[kikosko]

Я сделал имитацию мини-магазина:

• - Форму с полями name, price, count и кнопкой Add. При клике на эту кнопку продукт добавляется в магазин.
  
• - Форму с полем name и кнопкой Delete. При клике на эту кнопку из магазина удаляется продукт с указанным именем.
  
• - По клику на заголовок колонки Price происходит сортировка товаров по этому полю.
  
• - Нижняя строка таблицы Total содержит суммарное значение стоимости всех товаров, вывожу ее при построении таблицы с массива товаров
  

Проблема состоит вот в чем:

1. -Когда сортируются продукты по цене, при клике Price:, происходит сортировка только тех продуктов, которые по умолчанию были в массиве, который выводиться в таблицу, а после того как добавляю новые, они почему-то больше не сортируются.
   
2. - Ячейка общей стоимости товаров выводиться каждый раз, когда я добавляю или удаляю товар
   
3. -Проверку инпутов на пустоту, делал через условие:

   if(inputsAdd[0] === "" || inputsAdd[1] === "" || inputsAdd[2] === "") {alert("fill all fields"); }else { //мой код }

   Идентично на форме удаления, но проверка не работала, так же пробовал через try и catch, но результат был тот же.
   
   

Помогите пожалуйста разобраться Мой код

Answer 1

[Антон Спирин]

1. После срабатывания этой строки, пропадает слушатель:

table.innerHTML += `<tfoot><tr id="total-price"><td colspan="3">Total price: 
        ${shop.totalProductsPrice}</td></tr></tfoot>`;

Вызов table.innerHTML += some;, равносилен table.innerHTML = table.innerHTML + some;
- Сначала ваш html приводится к строке и складывается с новой строкой.
- Затем результат парсится и создаются новые элементы.
- Они добавляются в таблицу, на место старых.
- Слушателей на них естественно нет.
Из-за этой же строки возникает проблема 2. Так как, каждый раз добавляется новый футер, а удаляете вы только строки с классом .data.
3. Причина в вашем приведении строки к числу. Для пустой строки оно возвращает NaN. Выражение NaN === "" возвращает false.

Comments

[Bhudh]

Причина в вашем привидении

Вы человека-то так не пугайте, он ещё жив, раз сюда пишет!

[Антон Спирин]

Bhudh, хах. Ошибся. Поправил)

Answer 2

[Виктор Янышев]

1. Нужно сначало проверить отсортировано или нет. Перед append в зависимости от условия сортировки найти товар и после него вставить новый товар.
2. Здесь не понятно в чем проблема. Речь о том что нету пересчёта?
3. Тут медот length, также используйте forms

Comments

[Антон Спирин]

Когда сам ничего не понял, но ответ с абсурдными советами написал.

[kikosko]

Я так понимаю вы не переходили по силке
2. Создается новая tr c tdTotal price: (сумма общей стоимости товаров)td при каждом добавлении, или удалении товара, то есть при клике на кнопку добавить или удалить