Проблема в корзине покупок в javascript (ES6)
У меня есть простая проблема: функция добавления в корзину работает не так, как должна. Когда я нажимаю кнопку Удалить, он добавляет что-то в корзину. Но когда я нажимаю кнопку Добавить в корзину, она ничего не выводит.
const products = [];
const carts = [];
const inputs = {
productId: document.getElementById("productID"),
desc: document.getElementById("product_desc"),
qty: document.getElementById("quantity"),
price: document.getElementById("price")
};
const productsTable = document.getElementById("products-table");
const cartsTable = document.getElementById("carts-table");
document.getElementById('btnAddProduct').onclick = addProduct;
function renderProductsTable(e) {
// delete all entries
[...productsTable.children].slice(1).forEach(entry => productsTable.removeChild(entry));
for (product of products) {
let tr = document.createElement('tr');
tr.innerHTML = `<td>${ product.id }</td>
<td>${ product.desc }</td>
<td>${ product.qty }</td>
<td>${ product.price }</td>
<td>
<button id="${ product.id }">Delete</button>
<button id="${ product.id }">Add to Cart</button>
</td>`;
productsTable.appendChild(tr);
document.getElementById(product.id).addEventListener("click", removeProduct);
document.getElementById(product.id).addEventListener("click", addCart);
}
}
function renderCartsTable(e) {
// delete all entries
[...cartsTable.children].slice(1).forEach(entry => cartsTable.removeChild(entry));
for (cart of carts) {
let tr = document.createElement('tr');
tr.innerHTML = `<td>${ product.id }</td>
<td>${ product.desc }</td>
<td>${ product.qty }</td>
<td>${ product.price }</td>
<td>${ product.price * product.qty }</td>
<td>
<button id="${ product.id }">Delete</button>
</td>`;
cartsTable.appendChild(tr);
}
console.log(carts);
}
function addProduct() {
const product = {
id: inputs.productId.value,
desc: inputs.desc.value,
qty: Number(inputs.qty.value),
price: Number(inputs.price.value)
};
if (product.id === '') {
alert('Please enter a product id');
return;
}
let existing = products.find(item => item.id === product.id);
if (existing) {
existing.qty += product.qty;
}
else {
products.push(product);
}
renderProductsTable();
document.getElementById('order').reset();
}
function removeProduct(product_id) {
const index = products.findIndex(p => p.id === product_id);
products.splice(index, 1);
renderProductsTable();
}
function addCart(product_id) {
const product = products.find(p => p.id === product_id);
const cartItem = carts.find(c => c.product === product);
if(cartItem) {
cartItem.qty ++;
}
else {
carts.push(product);
}
renderCartsTable();
}
<body>
<form name="order" id="order">
<table>
<tr>
<td>
<label for="productID">Product ID:</label>
</td>
<td>
<input id="productID" name="product" type="text" size="28" required/>
</td>
</tr>
<tr>
<td>
<label for="product">Product Desc:</label>
</td>
<td>
<input id="product_desc" name="product" type="text" size="28" required/>
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input id="quantity" name="quantity" width="196px" required/>
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input id="price" name="price" size="28" required/>
</td>
</tr>
</table>
<input type="reset" class="resetbtn" value="Reset" />
<input type="button" id="btnAddProduct" value="Add New Product" >
</form>
<table border="1|1" id="products-table">
<tr>
<th>Product ID</th>
<th>Product Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Action</th>
</tr>
</table>
<h2>Shopping Cart</h2>
<table border="1|1" id="carts-table">
<tr>
<th>Product ID</th>
<th>Product Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
<th>Action</th>
</tr>
</table>
<br />
</body>
<script src="script.js"></script>
Что я уже пробовал:
Я попробовал несколько шагов, как это исправить, но, похоже, это все еще не работает. Надеюсь, вы сможете помочь. Спасибо.
Andy Lanng
Привет :)