Javascript 为什么添加商品的方法不正确？

当add方法的侦听器“buttAdd.addEventListener”被触发时：，首先此条件会工作几次（与第二次添加一起工作）：

当字段不为空，然后添加产品时，它会起作用。如果你点击带有空字段的添加按钮，那么先前添加的产品将丢失。使用方法删除相同的故事A。请帮我修一下

//产品创建类
类产品{
建造商（名称、数量、价格）{
this.name=名称；
this.count=计数；
这个价格=价格；
}
}
Product.SORT\u ORDER\u ASC=1；
Product.SORT\u ORDER\u DESC=-1；
//С记录产品的地方
班级商店{
构造函数（）{
这是产品=[]；
this.formAdd=document.forms[0]；
this.inputsad=this.formAdd.elements；
this.buttAdd=this.formAdd.elements[3]；
this.formDelete=document.forms[1]；
this.nameDelete=this.formDelete.elements[0]；
this.buttDelete=this.formDelete.elements[1]；
}
//添加产品的方法
addProduct（新产品）{
此.products.push（新产品）；
}
//按名称删除产品的方法
deleteProductByName（产品名称）{
设i=this.products.length；
而(我--){
如果（productName==this.products[i].name）{
本.产品.拼接（i，1）；
}
}
}
//获得所有产品的总价格
获取totalProductsPrice（）{
返回这个.products.map（product=>product.price）.reduce（（p，c）=>p+c）；
}
//按价格对产品进行分类的方法
sortProductsByPrice（sortOrder）{
const sorted=this.products.sort（（a，b）=>{
返回a.price>b.price？排序器：-排序器；
});
这个。产品=分类；
}
//方法绘制具有产品属性的表(
//名称、数量、价格）
show（）{
//通过单击添加新产品
this.buttAdd.addEventListener（'单击'，（e）=>{
e、 预防默认值（）；
if（this.inputsad[0]。值==“”| | this.inputsad[1]。值==“”| | this.inputsad[2]。值==“”）{
警报（“填写所有字段”）；
}否则{
this.addProduct（新产品（this.inputsad[0].value，parseInt（this.inputsad[2].value）），
parseInt（this.inputsAdd[1].value））；
this.show（）；
此.inputsAdd[0].value=“”；
this.inputsAdd[1].value=“”；
this.inputsAdd[2].value=“”；
}
}，假）；
//单击后按名称删除产品
this.buttDelete.addEventListener（'click'，（e）=>{
e、 预防默认值（）；
如果（this.nameDelete.value==“”）{
警告（“写下要删除的产品名称”）；
}否则{
this.deleteProductByName（this.nameDelete.value）；
this.show（）；
this.nameDelete.value=“”；
}
}，假）；
const rows=document.queryselectoral（#shop.data”）；
for（设i=rows.length-1；i>=0；i--）{
常数e=行。项目（i）；
e、 parentNode.removeChild（e）；
}
const table=document.getElementById（“shop”）；
const tFoot=table.querySelector（'tFoot'）；
if（tFoot）tFoot.remove（）；
for（设i=0；i{
设elem=e.target；
如果（元素id==“过滤器”）{
this.sortProductsByPrice（Product.SORT\u ORDER\u ASC）；
this.show（）；
}
}，假）；
console.log（this.products）；
}
}
let shop=新商店（）；
shop.addProduct（新产品（“产品”），2000年1月）；
添加产品（新产品（“产品1”，2500））；
添加产品（新产品（“产品2”，3，1000））；
shop.show（）

添加产品
产品名称
产品价格
产品计数
添加
产品
按名称删除产品
删除
商店中提供的产品
姓名：
价格：
计数：
请参见，您正在定义
let shop=new shop（）
，然后在shop类中使用此变量，如
shop.show（）
。我强烈建议您使用
this
关键字，而不是作用域变量（对所有其他
shop
使用条目有效）

现在，关于

工作了好几次

我假设，当您调用
show（）
方法时，它会在某个时间注册更多的事件侦听器。我的意思是，你调用
show
——它会创建新的事件侦听器，有时还会调用自己（嗯，这是相当危险的）。我建议您将侦听器声明移动到构造函数中，这样它们将被实例化一次（但这需要保留DOM节点）。另外，最好将您的show function拆分为几个较小的函数，并去掉自函数emit（这将降低复杂性）。
“使用该方法的情况相同，请删除。”我只看到您描述的
添加
，而不是
删除
的问题。（这是有道理的，你的
删除
按钮有
type=“button”
，但是你的
添加
按钮没有）你真的在片段中看到了
删除
吗？是的，删除也会发生同样的情况，
if (inputsAdd [0].value ===""||inputsAdd [1].value ===""||inputsAdd [2]
.value === "") 
{alert ("fill all fields");}