Question

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

根据我的代码，item.name始终为“乳制品牛奶”。

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>

我的输出应为：
what my output should like be

Answer 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函数传递项目值。

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

1 个答案: