具有一种功能但功能不同的多个按钮答案

【问题标题】：Multiple Button with one function but different functionalities具有一种功能但功能不同的多个按钮
【发布时间】：2019-07-11 10:51:05
【问题描述】：

我正在使用 div 标签创建一个表格。总共有 9 行，每行有 3 列，每行的第三列是一个按钮，第一列和第二列分别显示产品名称和价格。现在，正如我所说，每一行都包含一个按钮，我想要的是在我们单击按钮后，该方法必须添加单击该按钮的产品的数量。假设点击产品“百事可乐”的按钮，我希望该方法应显示在表格“购物车中的百事可乐数量 = 1”下方。如果我们再次点击产品百事可乐旁边的购买按钮，则 1 变为 2。同样的事情必须发生在其他产品上。

根据我的代码，item.name 将始终为“Dairy Milk”。

var countP1 = 0;
var p1 = {
  "Name": "Pepsi",
  "Price": 15
};
var p2 = {
  "Name": "coke",
  "Price": 10
};
var p3 = {
  "Name": "Mirinda",
  "Price": 20
};
var p4 = {
  "Name": "Sprite",
  "Price": 16
};
var p5 = {
  "Name": "Minute Maid",
  "Price": 25
};
var p6 = {
  "Name": "5star",
  "Price": 10
};
var p7 = {
  "Name": "Kitkat",
  "Price": 15
};
var p8 = {
  "Name": "perk",
  "Price": 8
};
var p9 = {
  "Name": "Dairy Milk",
  "Price": 30
};
var arr = [p1, p2, p3, p4, p5, p6, p7, p8, p9];
var s1 = "<div class = 'divHead'>" + "Name" + "</div>";
var s2 = "<div class = 'divHead'>" + "Price" + "</div>";
var s3 = "<div class = 'divHead'>" + "Buy" + "</div>";
var str = s1 + s2 + s3;
for (var i = 0; i < arr.length; i++) {
  var item = arr[i];
  var name = "<div class = 'divCell'>" + item.Name + "</div>";
  var price = "<div class = 'divCell'>" + item.Price + "</div>";
  var buy = "<div class = 'divCell'>" + "<button onclick='buyMat()' > "+" Buy "+" < /button>"+"</div > ";;
  var row = "<div class = 'divRow'>" + name + price + buy + "</div>";
  str = str + row;
}
document.getElementById("id1").innerHTML = str;

function buyMat() {
  console.log(countP1);
  console.log(item.Name);
  if (item.Name == "Pepsi") {
    countP1 += 1;

    document.getElementById("id2").innerHTML = item.name + " , quaantity in cart = "+countP1;
  }

}

<div id="id1"></div>
<div class='divCart' id="id2">Cart is Empty!</div>

我的输出应该是：

【问题讨论】：

Rahul，请查看：stackoverflow.com/posts/56987554/revisions 并在需要其他更改时进行编辑。我刚刚删除了一些新行以启动并运行您提供的代码。

标签： javascript html css

【解决方案1】：

Rahul，我更正了您代码中的几行。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="section8.css">
</head>
<body>
<div id = "id1"></div>
<div class = 'divCart' id = "id2">Cart is Empty!</div>
</body>
<script>
var countP1 = 0;    
var p1 = {"Name":"Pepsi","Price":15};
var p2 = {"Name":"coke","Price":10};
var p3 = {"Name":"Mirinda","Price":20};
var p4 = {"Name":"Sprite","Price":16};
var p5 = {"Name":"Minute Maid","Price":25};
var p6 = {"Name":"5star","Price":10};
var p7 = {"Name":"Kitkat","Price":15};
var p8 = {"Name":"perk","Price":8};
var p9 = {"Name":"Dairy Milk","Price":30};
var arr = [p1,p2,p3,p4,p5,p6,p7,p8,p9];
var s1 = "<div class = 'divHead'>"+"Name"+"</div>";
var s2 = "<div class = 'divHead'>"+ "Price"+"</div>";
var s3 = "<div class = 'divHead'>"+"Buy"+"</div>";
var str = s1+s2+s3;
for(var i = 0;i<arr.length;i++){
    var item = arr[i];
    var name = "<div class = 'divCell'>"+item.Name+"</div>";
    var price = "<div class = 'divCell'>"+item.Price+"</div>";
    var buy ="<div class = 'divCell'>"+'<button onclick = "buyMat('+i+')">'+"Buy"+"</button>"+"</div>";;
    var row = "<div class = 'divRow'>"+name+price+buy+"</div>";
    str = str + row;
}
document.getElementById("id1").innerHTML = str;

function buyMat(n){
    console.log(countP1);
    console.log(arr[n].Name);
    if(arr[n].Name == "Pepsi"){
        countP1+=1;

        document.getElementById("id2").innerHTML = arr[n].name +" , quaantity in cart = "+countP1;
        }

}

</script>

var arr 包含数据，因此需要检查所选项目的该变量，还需要通过 click 函数传递项目值。

【讨论】：

现在代码正在更新“id2”。你能告诉我一种方法，如果我点击另一个产品购买按钮，它会附加到前一个..如果我点击前一个产品的购买按钮，它应该在同一个按钮上更新，而不是在新行上附加@Prashant
为所有产品创建计数器。根据单击的项目值增加该产品的计数器值。要显示数据，请为所有产品创建标签字段并根据产品更新值。最初隐藏标签字段，然后根据产品显示它们@Rahul