按钮Onclick事件失效：对象内qty变量仅能递增至1的问题

我编写的核心代码如下（add、remove函数及flower.blueyellow.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);

配套的增减按钮HTML：

<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>

当前问题：点击按钮时qty最多只能增加到1就无法继续，将qty改为对象外变量时功能正常。

问题原因 #

JavaScript中基本类型（数字、字符串等）是值传递，调用add(flower.blueyellow.qty)时，只是把qty的当前值（比如0）复制了一份传给函数参数，函数内的qty++修改的是这个副本，完全没影响到flower.blueyellow.qty本身。每次点击按钮，传进去的都是原对象里qty的初始值0，加1后页面显示1，但原对象qty还是0，下次点击依旧传0，所以数值卡在1不动。

解决方案 #

方案1：直接操作原对象属性（无需传参）

修改add、remove函数，直接操作flower.blueyellow.qty，按钮点击时不用传参：

function add() {
  flower.blueyellow.qty++;
  document.getElementById("qty").innerHTML = flower.blueyellow.qty;
}

function remove() {
  if (flower.blueyellow.qty > 0) {
    flower.blueyellow.qty--;
  }
  document.getElementById("qty").innerHTML = flower.blueyellow.qty;
}

对应修改按钮HTML：

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

方案2：传递对象引用（利用引用传递特性）

如果想保留参数传递方式，可传递整个blueyellow对象（对象是引用传递，修改属性会影响原对象）：

function add(item) {
  item.qty++;
  document.getElementById("qty").innerHTML = item.qty;
}

function remove(item) {
  if (item.qty > 0) {
    item.qty--;
  }
  document.getElementById("qty").innerHTML = item.qty;
}

对应修改按钮HTML：

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

额外优化：初始化qty显示

页面加载时初始化显示qty的初始值，避免页面一开始为空：

window.onload = function() {
  document.getElementById("qty").innerHTML = flower.blueyellow.qty;
};

内容的提问来源于stack exchange，提问作者NinjaCoder