- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一个简单的问题。当我将产品添加到购物车并再次将相同的产品添加到购物车时,它会添加另一行。它应该只是增加其数量。希望得到您的答复。这对我来说将是一个很大的帮助。请仅使用纯 JAVASCRIPT。没有 JQUERY。谢谢你们。
//var qtyTotal = 0;
//var priceTotal = 0;
var products = [];
function addProduct() {
var productID = document.getElementById("productID").value;
var product_desc = document.getElementById("product_desc").value;
var qty = document.getElementById("quantity").value;
// qtyTotal = qtyTotal + parseInt(qty);
//document.getElementById("qtyTotals").innerHTML=qtyTotal;
var price = document.getElementById("price").value;
var newProduct = {
product_id : null,
product_desc : null,
product_qty : 0,
product_price : 0.00,
};
newProduct.product_id = productID;
newProduct.product_desc = product_desc;
newProduct.product_qty = qty;
newProduct.product_price = price;
products.push(newProduct);
//console.log("New Product " + JSON.stringify(newProduct))
//console.log("Products " + JSON.stringify(products))
var html = "<table border='1|1' >";
html+="<td>Product ID</td>";
html+="<td>Product Description</td>";
html+="<td>Quantity</td>";
html+="<td>Price</td>";
html+="<td>Action</td>";
for (var i = 0; i < products.length; i++) {
html+="<tr>";
html+="<td>"+products[i].product_id+"</td>";
html+="<td>"+products[i].product_desc+"</td>";
html+="<td>"+products[i].product_qty+"</td>";
html+="<td>"+products[i].product_price+"</td>";
html+="<td><button type='submit' onClick='deleteProduct(\""+products[i].product_id +"\", this);'/>Delete Item</button>   <button type='submit' onClick='addCart(\""+products[i].product_id +"\", this);'/>Add to Cart</button></td>";
html+="</tr>";
}
html+="</table>";
document.getElementById("demo").innerHTML = html;
document.getElementById("resetbtn").click()
}
function deleteProduct(product_id, e) {
e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
for(var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
// DO NOT CHANGE THE 1 HERE
products.splice(i, 1);
}
}
}
function addCart(product_id){
var html = '';
var ele = document.getElementById("demo2");
if(ele.innerHTML == '')
{
html+="<table id='tblCart' border='1|1'>";
html+="<tr><td>Product ID</td>";
html+="<td>Product Description</td>";
html+="<td>Quantity</td>";
html+="<td>Price</td>";
html+="<td>Total</td>";
html+="<td>Action</td></tr>";
}
for (var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
products[i].product_qty = parseInt(products[i].product_qty) + 1;
html+="<tr>";
html+="<td>"+products[i].product_id+"</td>";
html+="<td>"+products[i].product_desc+"</td>";
html+="<td>"+products[i].product_qty+"</td>";
html+="<td>"+products[i].product_price+"</td>";
html+="<td>"+parseInt(products[i].product_price)*parseInt(products[i].product_qty)+"</td>";
html+="<td><button type='submit' onClick='subtractQuantity(\""+products[i].product_id +"\", this);'/>Subtract Quantity</button></td>";
html+="</tr>";
}
}
if(ele.innerHTML == '')
{
html+= "</table>";
ele.innerHTML = html;
}
else
{
document.getElementById("tblCart").innerHTML += html;
}
}
function subtractQuantity(product_id)
{ alert(product_id);
for(var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id & products[i].product_qty >= 1) {
products[i].product_qty = parseInt(products[i].product_qty) - 1;
}
if (products[i].product_id == 0) {
removeItem(products[i].product_id);
}
console.log("Products " + JSON.stringify(products));
}
}
function removeItem(product_id) {
for(var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
// DO NOT CHANGE THE 1 HERE
products.splice(i, 1);
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart Pure Javascript</title>
</head>
<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" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" >
</form>
<br>
<p id="demo"></p> <br/>
<h2> Shopping Cart </h2>
<p id="demo2"></p>
</body>
</html>
最佳答案
首先,您尝试将产品和购物车商品存储在SAME ARRAY中。购物车应包含产品实例,而不是相反。
其次,您不断向 html 表格中添加内容,而无需删除前一行(对于同一产品)。
第三,将价格变量转换为整数,货币值应始终为浮点或 double 。
我假设您正在寻找类似以下内容的内容:
var products = [];
var cart = [];
function addProduct() {
var productID = document.getElementById("productID").value;
var product_desc = document.getElementById("product_desc").value;
var qty = document.getElementById("quantity").value;
var price = document.getElementById("price").value;
var newProduct = {
product_id: null,
product_desc: null,
product_qty: 0,
product_price: 0.00,
};
newProduct.product_id = productID;
newProduct.product_desc = product_desc;
newProduct.product_qty = qty;
newProduct.product_price = price;
products.push(newProduct);
var html = "<table border='1|1' >";
html += "<td>Product ID</td>";
html += "<td>Product Description</td>";
html += "<td>Quantity</td>";
html += "<td>Price</td>";
html += "<td>Action</td>";
for (var i = 0; i < products.length; i++) {
html += "<tr>";
html += "<td>" + products[i].product_id + "</td>";
html += "<td>" + products[i].product_desc + "</td>";
html += "<td>" + products[i].product_qty + "</td>";
html += "<td>" + products[i].product_price + "</td>";
html += "<td><button type='submit' onClick='deleteProduct(\"" + products[i].product_id + "\", this);'/>Delete Item</button>   <button type='submit' onClick='addCart(\"" + products[i].product_id + "\", this);'/>Add to Cart</button></td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("demo").innerHTML = html;
document.getElementById("resetbtn").click()
}
function deleteProduct(product_id, e) {
e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
for (var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
// DO NOT CHANGE THE 1 HERE
products.splice(i, 1);
}
}
}
function addCart(product_id) {
//Indentify the product and add it to new "cart" array
for (var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
var cartItem = null;
for (var k = 0; k < cart.length; k++) {
if (cart[k].product.product_id == products[i].product_id) {//Already exists in cart, increment quantity.
cartItem = cart[k];
cart[k].product_qty++;//Increment by one only, as requested.
break;
}
}
if (cartItem == null) {
//Every item in the cart specifies the product in question as well as how many of the product there is in the cart, starts off at product's quantity
var cartItem = {
product: products[i],
product_qty: products[i].product_qty // Start of at product's quantity
};
cart.push(cartItem);
}
break
}
}
renderCartTable();
}
function renderCartTable() {
var html = '';
var ele = document.getElementById("demo2");
ele.innerHTML = ''; //Start by clearng your table of old elements
html += "<table id='tblCart' border='1|1'>";
html += "<tr><td>Product ID</td>";
html += "<td>Product Description</td>";
html += "<td>Quantity</td>";
html += "<td>Price</td>";
html += "<td>Total</td>";
html += "<td>Action</td></tr>";
for (var i = 0; i < cart.length; i++) {
html += "<tr>";
html += "<td>" + cart[i].product.product_id + "</td>";
html += "<td>" + cart[i].product.product_desc + "</td>";
html += "<td>" + cart[i].product_qty + "</td>";
html += "<td>" + cart[i].product.product_price + "</td>";
html += "<td>" + parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty) + "</td>";
html += "<td><button type='submit' onClick='subtractQuantity(\"" + cart[i].product.product_id + "\", this);'/>Subtract Quantity</button></td>";
html += "</tr>";
}
html += "</table>";
ele.innerHTML = html;
}
function subtractQuantity(product_id)
{
alert("Removing 1 instance of product "+product_id);
for (var i = 0; i < cart.length; i++) {
if (cart[i].product.product_id == product_id) {
cart[i].product_qty--;//decrement by one
}
if (cart[i].product_qty == 0) {
cart.splice(i,1);//Remove from cart
}
console.log("Products " + JSON.stringify(products));
}
//Finally, re-render the cart table
renderCartTable();
}
function removeItem(product_id) {
for (var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
// DO NOT CHANGE THE 1 HERE
products.splice(i, 1);
}
}
}
这将从产品指定的数量开始您的购物车,然后从那里增加/减少 1。
关于javascript - 相同的产品但在表中添加另一行(仅限 JavaScript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44825407/
这个问题不太可能帮助任何 future 的访问者;它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关,这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用,visit
我们有自己的 http 服务器适配器,我们用它来托管多个站点。 本网站通过 https 运行。当我们尝试使用 chrome、firefox 或 safari 访问 url 时,它工作正常。该问题仅发生
让我从代码开始……请注意,这不是关于覆盖实例方法的问题——这纯粹涉及扩展方法。此代码用于 Unity3D 游戏引擎,版本 5.3.x public static class ExtentionMeth
我想知道如何开发一个只提供 iOS native 设置应用程序中的一些设置的应用程序,比如很多 cydia 调整,而跳板上没有图标?我的目标只是让一些开关和按钮在我的本地网络上发送命令。 最佳答案 在
好吧,我需要得到两个值来表示两个完整日期之间的距离(没有小时/时间)......在 MySQL 上我们有 PERIOD_DIFF 来获取两个日期之间的差异(只有月份和年份),但我也需要包括日期。 我有
这就是我想要做的。在我的 html 页面上,我必须有 4 种不同的字体大小,其中一种是 10px 20px 30px 40px 然后重置。 当我在 10px 上单击或滚动鼠标时,字体大小会更改并在 d
这个问题在这里已经有了答案: How can I transition height: 0; to height: auto; using CSS? (41 个回答) 关闭 4 年前。
我喜欢 JQuery Mobile,但我的页面中有许多与 JQuery Mobile 不兼容的自定义 Javascript。 我页面中的所有内容都工作正常,但是当我添加 JQuery Mobile 库
我正在尝试创建以下工具提示(不是其中的内容 - 只是框和箭头): 我在让箭头与主框正确融合时遇到问题。 我创建了一个 Fiddle here使用我目前拥有的代码。 您会注意到箭头看起来不错,但不是 1
我是 Javascript 新手。我正在尝试通过练习来学习它。我正在做的这个看起来并不难,但我有一个小问题。 我有一个包含 3 个文本输入和一个提交按钮的表单。通过按下按钮,我获得了字段值并使用这些值
当我将鼠标悬停在按钮上时,我希望菜单滑出。不知何故,只有当我将悬停效果添加到菜单本身而不是按钮时,它才会起作用。我在网上能找到的都是一样的(悬停效果附加到应该滑出的菜单,而不是按钮)。我该如何实现?j
我只想让我的应用程序横向,所以我使用这里提供的方法:i want to make my application only in landscape in android 简而言之,我正在将 andro
我需要将我的共享扩展限制为仅纵向模式。但到目前为止,还不行。有办法吗? @implementation UINavigationController -(BOOL)shouldAutorotate {
不知道是否有人已经看到这个错误。请注意,这仅发生在 Android 4.x 库存浏览器中。它已经在 Android 4 上的 Chrome、旧版浏览器、iOS、Blackberry OS6 和 7、P
如果内容大于容器,我正在尝试构建一个可在 x 和 y 方向滚动的表格。我还希望标题始终在顶部可见。我已经完成了第一部分的工作,标题始终在顶部可见,但是标题列的大小与表格的大小不匹配。 我创建了这个 f
当对图像应用 ImageFilter.blur 时,图像的边缘没有变化。 如何将模糊扩展到边缘? import 'dart:ui'; import 'package:flutter/material.
我正在为 Android 平板电脑编写应用程序。我希望 ScreenOrientation 始终处于“横向”状态,但应用程序应该能够旋转 180°。如果您将平板电脑倒置,则 View 应正确显示并旋转
我有一个带有属性装饰器的类。 class Dispatcher: def __init__(self, url): self._session = None @prop
我只想在模型的查询集中选择几个字段。我看到了这个链接:Django queryset only我以为我实现了它,但我仍然得到了整个查询集。 这是我的项目 View .py: from django.s
我看了看,发现了类似的问题,但它们似乎都是如何将一个列表添加到另一个列表的末尾。 我最近用我在 Excel 中使用的一种技术回答了一个问题,该技术依赖于创建第三列,并使用公式填充来连接每一行的 col
我是一名优秀的程序员,十分优秀!