购物车中的问题javascript（ES6） [英] Problem in shopping cart in javascript (ES6)
本文介绍了购物车中的问题javascript（ES6）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个简单的问题，添加到购物车功能不能正常工作。当我点击删除按钮时，它会向购物车添加一些内容。但是当我点击添加到购物车按钮时，它不会输出任何内容。
< span class =code-keyword> const products = [];
const carts = [];
const inputs = {
productId： document .getElementById（ productID），
desc： document .getElementById（ product_desc），
数量： document .getElementById（ quantity），
price：< span class =code-sdkkeyword> document .getElementById（ price）
};
const productsTable = document .getElementById（ products-table）;
const cartsTable = document .getElementById（ carts-table）;
document .getElementById（' btnAddProduct').onclick = addProduct;
function renderProductsTable（e）{
// 删除所有条目
[... productsTable.children] .slice（ 1 ）。forEach（entry => productsTable.removeChild（entry））;
for （产品的产品）{
让 tr = document .createElement（' tr'）;
tr.innerHTML = ` < td > $ {product.id} < / td >
< td > $ {product.desc} < / td >
< < span class =code-leadattribute> td > $ {product.qty} < / td >
< td > $ {product.price} < / td >
< td >
< 按钮 id = $ {product.id} > 删除< / button >
< 按钮 id = $ {product.id} > 加入购物车< span class =code-keyword>< / button >
< / td > ` ;
productsTable.appendChild（tr）;
document.getElementById（product.id）.addEventListener（click，removeProduct）;
document.getElementById（product.id）.addEventListener（click，addCart）;
}
}
函数renderCartsTable（e）{
//删除所有条目
[... cartsTable .children] .slice（1）.forEach（entry => cartsTable.removeChild（entry））;
for（购物车）{
let tr = document.createElement（'tr'）;
tr.innerHTML =`< td > $ {product.id} < / td >
< td > $ {product.desc} < / td < span class =code-keyword>>
< td > $ {product.qty} < / td >
< td > $ {product.price} < / td >
< td > $ {product.price * product.qty} < / td >
< td >
< 按钮 id = $ {product.id} > 删除< ; /按钮 >
< / td > `;
cartsTable.appendChild（tr）;
}
console.log（carts）;
}
函数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（'请输入产品ID'）;
返回;
}
let existing = products.find（item => item.id === product.id）;
if（existing）{
existing.qty + = product.qty;
}
else {
products.push（product）;
}
renderProductsTable（）;
document.getElementById（'order'）。reset（）;
}
函数removeProduct（product_id）{
const index = products.findIndex（p => p.id === product_id）;
products.splice（index，1）;
renderProductsTable（）;
}
函数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 >
< 表格 名称 = 订单 id = order >
< table < span class =code-keyword>>
< tr >
< td >
< label = productID > 产品ID：< / label >
< / td >
< td >
< 输入 id = productID 名称 = product type = text size = 28 必需/ >
< / td >
< / tr >
< < span class =code-leadattribute> tr >
< td >
< label for = product > 产品说明：< / label > ;
< / td >
< td >
< 输入 id = product_desc 名称 = product 类型 = text size = 28 required / >
< / td >
< / tr >
< tr >
< td >
< label for = 数量 > 数量：< ; / label >
< / td >
< td >
< 输入 id = 数量 名称 = 数量 width < span class =code-keyword> = 196px 必需/ >
< / td >
< < span class =code-leadattribute> / tr >
< tr >
< td >
< label for = price > 价格：< / label >
< / td >
< td >
< 输入 id = price name = price size = 28 required / >
< / td >
< / tr >
< / table >
< 输入 type = 重置 class = resetbtn value = 重置 / >
< input type = 按钮 id = btnAddProduct value = 添加新产品 >
< / form >
< 表 border = 1 | 1 id = products-table >
< tr >
< th > 产品ID < / th >
< th < span class =code-keyword>> 产品说明< / th < span class =code-keyword>>
< th > 数量< / th < span class =code-keyword>>
< th > 价格< / th < span class =code-keyword>>
< th > 操作< / th >
< < span class =code-leadattribute> / tr >
< / table >
< h2 > 购物车< / h2 >
< 表 border = 1 | 1 id = carts-table >
< tr >
< th < span class =code-keyword>> 产品ID < / th < span class =code-keyword>>
< th > 产品说明< / th >
< th > 数量< / th >
< < span class =code-leadattribute> th > 价格< / th >
< < span class =code-leadattribute> th > 总< / th >
< < span class =code-leadattribute> th > 操作< / th >
< < span class =code-leadattribute> / tr >
< / table >
< br / >
< /正文 >
< script src = script.js > < / script >
我的尝试：
我试过关于如何修复它的几个步骤但它似乎仍然存在不起作用。希望你能帮忙。谢谢。
解决方案
{product.id} < / td >
< td >
{product.desc} < ; / td >
< td >
{ product.qty} < / td >
< td > < /跨度>
I have a simple problem, the add to cart function isn't working as it should. When i click the delete button, it add something to the cart. But when i click the add to cart button, it doesn't output anything.
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>
What I have tried:
I tried several steps on how to fix it but it seems it still doesn't work. Hope you can help. Thanks.
解决方案
{ product.id }</td> <td>
{ product.desc }</td> <td>
{ product.qty }</td> <td>
这篇关于购物车中的问题javascript（ES6）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
