#javascript #for-loop #button #indexing #shopping-cart
Вопрос:
Я пытаюсь выполнить задание по созданию программы для корзины покупок, но кнопка «Удалить» все еще не работает должным образом для меня. Я могу добавлять товары в корзину, соответственно обновлять количество книг и общую цену. Затем я нажимаю удалить, и независимо от того, какой элемент я нажимаю удалить рядом, первый элемент в списке удаляется.
Корзина для покупок после добавления книг
Корзина покупок после нажатия кнопки удалить
Нажатие кнопки удалить рядом с книгой «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;
Комментарии:
1. Вы установили прослушиватель событий для элемента с классом удаления, но в кнопке удалить вы добавляете атрибут onclick. Итак, когда вы нажимаете на кнопку удалить, вы дважды выполняете функцию removeItem.