Блог

Я пытаюсь выполнить задание по созданию программы для корзины покупок, но кнопка «Удалить» все еще не работает должным образом для меня. Я могу добавлять товары в корзину, соответственно обновлять количество книг и общую цену. Затем я нажимаю удалить, и независимо от того, какой элемент я нажимаю удалить рядом, первый элемент в списке удаляется.

Корзина для покупок после добавления книг

Корзина покупок после нажатия кнопки удалить

Нажатие кнопки удалить рядом с книгой «Javascript отстой» ничего не делает. При нажатии кнопки удалить рядом с книгой «Мое название» дважды удаляются первые две книги в списке, а не книга «Мое название». Кроме того, обратите внимание, что количество книг теперь равно 1, когда в корзине осталось еще 3 книги, и общее количество отражает только книгу «Javascript отстой».

Затем, по мере того как корзина используется все чаще, она функционирует все меньше и меньше. Например, если я удаляю, удаляю все элементы корзины, а затем добавляю новые элементы с помощью кнопки «Создать», количество книг теперь правильное, но я больше не могу удалять элементы.

корзина для покупок после удаления книг, а затем добавления новых книг

 //default cart if no local storage books = [  {  id: 1, //assign each book an id  title: 'Absolute Java',  qty: 1,  price: 114.95  },  {   id: 2,  title: 'Pro HTML5',  qty: 1,  price: 27.95  },  {   id: 3,  title: 'Head First HTML5',  qty: 1,  price: 27.89  } ];  //when the page loads onload = ()=gt;{   //check for local storage(aka myCart)  var myCart = localStorage.getItem("myCart"); //var could instead be let  //if exists then  if(myCart){  //load from localStorage  books = JSON.parse(myCart);  }     /* book array at top already is default  making "else" unnecessary  else {  //load default (books)  }  */    buildCart();  updateCount();  updateTotal();    //The NEW button  let btnAdd = document.querySelector("#new"); //use # for id=  btnAdd.addEventListener("click", addItem);   //The REMOVE button  let btnRemove = document.querySelector(".remove"); //use . for class=  btnRemove.addEventListener("click", removeItem);   //The SAVE button  let btnSave = document.querySelector("#save");  btnSave.addEventListener("click", saveCart); }   const buildCart = ()=gt;{  var tbody = document.querySelector("tbody"); //or .getElementByTagName  for(let book of books) {  // back tick, not quotation  //create each row and assign id  let str = `   lt;tr id="${book.id}"gt;   lt;tdgt;  lt;input class="title" value="${book.title}"gt;  lt;/tdgt;  lt;tdgt;  lt;input class="qty" size="2" value="${book.qty}"gt;  lt;/tdgt;  lt;tdgt;  lt;input size="2" value="${book.price}"gt;  lt;/tdgt;  lt;tdgt;${book.price}lt;/tdgt;  lt;tdgt;${updateLineTotal(book)}lt;/tdgt;  lt;tdgt;  lt;button class="remove" onclick="removeItem(${book.id})"gt;   Remove  lt;/buttongt;  lt;/tdgt;  lt;/trgt;  `;  tbody.innerHTML  = str; //insert row into HTML  }  }  //functions  //add book to cart const addItem = ()=gt;{  let book = {  id: Math.random().toString(16).slice(2),  title: 'Javascript Sucks',  qty: 1,  price: 54.99  }   let str = `  lt;tr id="${book.id}"gt;  lt;tdgt;  lt;input class="title" value="${book.title}"gt;  lt;/tdgt;  lt;tdgt;  lt;input class="qty" size="2" value="${book.qty}"gt;  lt;/tdgt;  lt;tdgt;  lt;input size="2" value="${book.price}"gt;  lt;/tdgt;  lt;tdgt;${book.price}lt;/tdgt;  lt;tdgt;${updateLineTotal(book)}lt;/tdgt;  lt;tdgt;  lt;button class="remove" onclick="removeItem(${book.id})"gt;  Remove  lt;/buttongt;  lt;/tdgt;  lt;/trgt;  `;  var tbody = document.querySelector("tbody");  tbody.innerHTML  = str;   books.push(book);  updateCount();  updateTotal(); }  //save books in cart to localStorage const saveCart = (object)=gt;{  var stringified = JSON.stringify(object);  localStorage.setItem(id, stringified); //save id amp; book info  return true; }  //display number of books in cart const updateCount = ()=gt;{  document.querySelector("#count").innerHTML = books.length; }  //display total cost of all books const updateTotal = ()=gt;{  var total = 0;  for(let book of books){  total  = book.price * book.qty;  }  document.querySelector("#total").innerHTML = total.toFixed(2); //rounds number to 2 decimal places }  //display total cost for books in each row const updateLineTotal = (book)=gt;{  return (book.price * book.qty).toFixed(2) }  //remove book from cart const removeItem = (id)=gt;{  var row = document.getElementById(id);  row.remove();   //same as remove  books = books.filter(bk =gt; {  return bk.id !== id;  });   updateCount();  updateTotal();  }      lt;!DOCTYPE htmlgt; lt;html lang='en' ng-app="HUR_cart"gt; lt;headgt;  lt;titlegt;Book Shopping Cartlt;/titlegt;  lt;meta charset="UTF-8"gt;  lt;script src="cart.js"gt;lt;/scriptgt;  lt;link rel="stylesheet" href="cart.css"gt; lt;/headgt;   lt;main style="margin-left:auto;margin-right:auto;width:800px"gt;  lt;divgt;  lt;table gt;  lt;captiongt;lt;bgt;My Bookslt;/bgt;lt;/captiongt;  lt;theadgt;  lt;trgt;  lt;thgt;Titlelt;/thgt;  lt;thgt;Qtylt;/thgt;  lt;thgt;UnitPricelt;/thgt;  lt;thgt;$UnitPricelt;/thgt;  lt;thgt;Line Totallt;/thgt;  lt;thgt;Total $lt;span id="total"gt;lt;/spangt;lt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  lt;/tbodygt;  lt;tfootgt;  lt;trgt;  lt;td colspan="3"gt;  lt;button id="new"gt;Newlt;/buttongt;  lt;/tdgt;  lt;td colspan="3"gt;  lt;button id="save"gt;Savelt;/buttongt;  lt;/tdgt;  lt;/trgt;  lt;/tfootgt;  lt;/tablegt;  lt;/divgt;  lt;bgt;Book Count : lt;span id="count"gt;0lt;/spangt;lt;/bgt; lt;/maingt; lt;/htmlgt;