我有以下脚本代码,其中前两个函数和位于底部的第一个变量中的qty是这里最重要的:

// show qty and price
function add(qty) {
qty++;
document.getElementById("qty").innerHTML = (qty);
}
function remove(qty) {
if (qty > 0) {
qty--;
document.getElementById("qty").innerHTML = (qty);
} else {
document.getElementById("qty").innerHTML = (qty);
}
}
// load products on home
function bl() {
document.getElementById("bl").style.display = "initial";
document.getElementById("br").style.display = "none";
}
function br() {
document.getElementById("br").style.display = "initial";
document.getElementById("bl").style.display = "none";
}
// load cart
function cart() {
document.getElementById("cart").style.display="block";
if (qty == 0) {
document.getElementById("by").style.display="none";
} else {
document.getElementById("by").style.display="block";
}
}
// leave cart
function leavecart() {
document.getElementById("cart").style.display="none";
}
// product list
var flower = {
 blueyellow: { 
    color : "linear-gradient(to right, blue, yellow)",
    src : "https://cdn.pixabay.com/photo/2022/07/22/15/11/woman-7338352_1280.jpg",
    price : 30,
    qty : 0,
    size : "small"
  },
 redyellow: { 
    color : "red, yellow",
    src : "https://cdn.pixabay.com/photo/2022/05/22/16/50/outdoors-7213961_1280.jpg",
    price : 25,
    qty : 0,
    size : "large"
  }
};
// product list in cart
document.getElementById("bycolor").style.display = (flower.blueyellow.color);
document.getElementById("bysrc").src = (flower.blueyellow.src);
document.getElementById("byprice").innerHTML = ("$" + flower.blueyellow.price);

然后我有两个按钮:一个用于添加到数量,另一个用于从数量中删除:

<div id="wrap" style="padding: 10px;">
<h2>Add to Cart</h2><p id="qty"></p><button onclick="add(flower.blueyellow.qty)">+</button><button onclick="remove(flower.blueyellow.qty)">-</button>
</div>

这里的问题是,onClick只会使数量变为1,而不会进一步增加.在try 使其适应变量中的变量之前,我让它工作,但现在它停止了.

推荐答案

这是因为您没有增加Flower.Blueyellow.qty的实际值

function add(color) {
  flower[color].qty++
    document.getElementById("qty").innerHTML=flower[color].qty;
}
function remove(color) {
  if (flower[color].qty > 0) {
  flower[color].qty--
  document.getElementById("qty").innerHTML = flower[color].qty;
  } else {
  document.getElementById("qty").innerHTML = flower[color].qty;
  }
}

var flower = {
 blueyellow: { 
    color : "linear-gradient(to right, blue, yellow)",
    src : "https://cdn.pixabay.com/photo/2022/07/22/15/11/woman-7338352_1280.jpg",
    price : 30,
    qty : 0,
    size : "small"
  },
};
<div id="wrap" style="padding: 10px;">
<h2>Add to Cart</h2><p id="qty"></p><button onclick="add('blueyellow')">+</button><button onclick="remove('blueyellow')">-</button>
</div>

Javascript相关问答推荐

在JavaScript中打开和关闭弹出窗口

如何使用React渲染器放置根dis?

如何在JavaScript中通过一次单击即可举办多个活动

布局样式在刷新时不持续

Express.js:使用Passport.js实现基于角色的身份验证时出现太多重定向问题

具有相同参数的JS类

如何最好地从TypScript中的enum获取值

康威的生活游戏规则在我的Javascript版本中不起作用.''我做错了什么?

当作为表达式调用时,如何解析方法decorator 的签名?

构造HTML表单以使用表单数据创建对象数组

在Three JS中看不到补间不透明度更改效果

如果Arrow函数返回函数,而不是为useEffect返回NULL,则会出现错误

将核心模块导入另一个组件模块时存在多个主题

如何在Java脚本中对列表中的特定元素进行排序?

无法读取未定义的属性(正在读取合并)-react RTK

对具有相似属性的对象数组进行分组,并使用串连的值获得结果

如何组合Multer上传?

如何使用抽屉屏幕及其子屏幕/组件的上下文?

如何根据查询结果重新排列日期

select 2-删除js插入的项目将其保留为选项