Javascript 单击按钮后如何更改按钮行为？更改“；“添加到购物车”；“打开”按钮；“从购物车上取下”；，而它'；行为

我已经为我的购物车创建了一个简单的功能，将商品数量添加到购物车（从柜台）。现在我需要对它做一些修改，但我不知道如何做。当我单击“添加到卡”时，项目进入购物车，然后我需要此按钮将其行为和名称更改为“从购物车中删除”，因此在单击时，它将从我的购物车->中删除项目（列在计数器中），并将其行为更改为默认（添加到购物车）。我需要像切换它的行为，一些想法，我怎么能做到这一点？非常感谢你

var plus=document.getElementById（'plus'）；
var减号=document.getElementById（'减号'）；
var amount=document.getElementById（'amount'）；
var button2=document.getElementById（'add'）；
var cart=document.getElementById（'cart'）；
计数=1；
plus.onclick=函数（）{
计数+=1；
amount.innerHTML=计数；
};
减1.onclick=函数（）{
如果（计数==1）返回；
计数-=1；
amount.innerHTML=计数；
};
button2.onclick=函数（）{
cart.innerHTML=“产品：”+计数；
}

正文{
保证金：0；
填充：0；
字体系列：“Lato”，无衬线；
字号：20pt；
字体大小：正常；
背景：红色；
/*对于不支持渐变的浏览器*/
背景：-webkit线性梯度（-90度，红色，黄色）；
/*适用于Safari 5.1至6.0*/
背景：-o-线性梯度（-90度，红色，黄色）；
/*歌剧11.1至12.0*/
背景：-moz线性梯度（-90度，红色，黄色）；
/*适用于Firefox 3.6至15*/
背景：线性梯度（-90度，红色，黄色）；
/*标准语法*/
}
梅因先生{
高度：200px；
保证金：100像素自动；
文本对齐：居中；
}
钮扣{
填充：20px 25px；
背景：透明；
字号：18pt；
边框：1件纯金；
颜色：黄色；
大纲：0；
}
#加{
}

减
1.
加
添加到购物车
产品：

如果按钮处于“添加到购物车”模式或“从购物车中删除”模式，则需要存储信息。您可以在

计数

变量旁边创建另一个

布尔

类型的变量：

var count = 1;
var cartIsEmpty = true;

然后在点击按钮时检查它的值，并更新它，以便它始终告诉您当前购物车是否为空。此外，您还可以更改按钮文本：

button2.onclick = function(){
    if (cartIsEmpty === true) {
        cartIsEmpty = false;
        button2.innerHTML = "remove from cart";
        cart.innerHTML = "products:" + count;
    } else {
        cartIsEmpty = true;
        button2.innerHTML = "add to cart";
        cart.innerHTML = "products:";      
    }
}

完整代码：

var plus=document.getElementById（'plus'）；
var减号=document.getElementById（'减号'）；
var amount=document.getElementById（'amount'）；
var button2=document.getElementById（'add'）；
var cart=document.getElementById（'cart'）；
var计数=1；
var cartIsEmpty=true；
plus.onclick=函数（）{
计数+=1；
amount.innerHTML=计数；
};
减1.onclick=函数（）{
如果（计数==1）返回；
计数-=1；
amount.innerHTML=计数；
};
button2.onclick=函数（）{
if（cartIsEmpty==true）{
cartIsEmpty=false；
button2.innerHTML=“从购物车中删除”；
cart.innerHTML=“产品：”+计数；
}否则{
cartIsEmpty=正确；
button2.innerHTML=“添加到购物车”；
cart.innerHTML=“产品：”；
}
}

正文{
保证金：0；
填充：0；
字体系列：“Lato”，无衬线；
字号：20pt；
字体大小：正常；
背景：红色；
/*对于不支持渐变的浏览器*/
背景：-webkit线性梯度（-90度，红色，黄色）；
/*适用于Safari 5.1至6.0*/
背景：-o-线性梯度（-90度，红色，黄色）；
/*歌剧11.1至12.0*/
背景：-moz线性梯度（-90度，红色，黄色）；
/*适用于Firefox 3.6至15*/
背景：线性梯度（-90度，红色，黄色）；
/*标准语法*/
}
梅因先生{
高度：200px；
保证金：100像素自动；
文本对齐：居中；
}
钮扣{
填充：20px 25px；
背景：透明；
字号：18pt；
边框：1件纯金；
颜色：黄色；
大纲：0；
}
#加{
}

减
1.
加
添加到购物车
产品：

以下内容跟踪当前购物车计数，并允许无限次添加和删除。为了提高效率，使用jquery。CSS保持不变

var plus=document.getElementById（'plus'）；
var减号=document.getElementById（'减号'）；
var amount=document.getElementById（'amount'）；
var button2=document.getElementById（'add'）；
var cart=$（“#cart”）；
计数=1；
plus.onclick=函数（）{
计数+=1；
amount.innerHTML=计数；
};
减1.onclick=函数（）{
如果（计数==1）返回；
计数-=1；
amount.innerHTML=计数；
};
$（“#添加”）。单击（函数（）{
if（$（this）.hasClass（“添加”））{
cart.innerHTML=“产品：”+计数；
$（此）.removeClass（“添加”）；
$（此）.addClass（“删除”）；
$（this.html（“从购物车中删除”）；
新值=parseInt（cart.attr（“值”））+count
}否则{
$（此）.removeClass（“删除”）；
$（this.addClass（'add'）；
$（this.html（“添加到购物车”）；
new_value=parseInt（cart.attr（“value”））-count；
}
购物车属性（“价值”，新的价值）；
购物车文本（“产品：+新价值）；
});
正文{
保证金：0；
填充：0；
字体系列：“Lato”，无衬线；
字号：20pt；
字体大小：正常；
背景：红色；
/*对于不支持渐变的浏览器*/
背景：-webkit线性梯度（-90度，红色，黄色）；
/*适用于Safari 5.1至6.0*/
背景：-o-线性梯度（-90度，红色，黄色）；
/*歌剧11.1至12.0*/
背景：-moz线性梯度（-90度，红色，黄色）；
/*适用于Firefox 3.6至15*/
背景：线性梯度（-90度，红色，黄色）；
/*标准语法*/
}
梅因先生{
高度：200px；
保证金：100像素自动；
文本对齐：居中；
}
钮扣{
填充：20px 25px；
背格