如何在单击时将按钮的名称属性及其相应的价格输出到新的div中

问题描述 投票：0回答：2

因此，当我单击按钮Koala时，它需要显示按钮的id名称和与Koala相关的相应价格的消息

继承人我的HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="CSS/styles.css" rel="stylesheet" />
<script src="JS/scripts.js"></script>
<title></title>


</head>
<body onload="init();">

<div id="picBtn">
    <div id="picKoala">
        <img src="Images/koala_PNG8.png" alt="Koala" width="300" />
        <div id="btnKoala">
            <button type="button" name="btnKoalas" class="BtnButton" 
onclick="getPrice('object1');">Koalas</button>
        </div>
    </div>

    <div id="picTulip">
        <img src="Images/laleh-piyaz.jpg" alt="Tulips" />
        <div id="btnTulip">
            <button type="button" name="btnTulips" class="BtnButton" 
onclick="getPrice('object2');">Tulips</button>
        </div>
    </div>
    <div id="picPenguin">
        <img src="Images/penguin.jpg" alt="Penguins" />
        <div id="btnPenguin">
            <button type="button" name="btnPenguins" class="BtnButton" 
onclick="getPrice('object3');">Penguins</button>
        </div>
    </div>
</div>
        <div id="output"></div>
</body>
</html>

这是我到目前为止的javascript代码：

function init(ProdId, SupplierCode, Description, PictureName, QtyOnHand, 
Price) {
var object1 = Object(1002, S1001, Koalas, koala_PNG8, 9, 119.95);
var object2 = Object(1003, S1002, Tulips, laleh-piyaz.jpg, 9, 7.95);
var object3 = Object(1004, S1003, Penguins, penguin.jpg, 9, 127.95);



 document.getElementById(output).innerHTML = "btnKoalas" + Price;


}

我知道有一个简单的方法可以做到这一点，感谢任何回答的人的帮助！

javascript html oop
2个回答
0
投票

您可以执行以下操作：

var object1 = {'ProdId': 1002, 'SupplierCode': 'S1001', 'Description': 'Koalas', 'PictureName': 'koala_PNG8', 'QtyOnHand': 9, 'Price': 119.95};
var object2 = {'ProdId': 1003, 'SupplierCode': 'S1002', 'Description': 'Tulips', 'PictureName': 'laleh-piyaz.jpg', 'QtyOnHand': 9, 'Price': 7.95};
var object3 = {'ProdId': 1004, 'SupplierCode': 'S1003', 'Description': 'Penguins', 'PictureName': 'penguin.jpg', 'QtyOnHand': 9, 'Price': 127.95};

function getPrice(object) {
  document.getElementById('output').innerHTML = object.Description + ": " + object.Price;
}
<div id="picBtn">
  <div id="picKoala">
    <img src="Images/koala_PNG8.png" alt="Koala" width="300" />
    <div id="btnKoala">
      <button type="button" name="btnKoalas" class="BtnButton" 
    onclick="getPrice(object1);">Koalas</button>
    </div>
  </div>

  <div id="picTulip">
    <img src="Images/laleh-piyaz.jpg" alt="Tulips" />
    <div id="btnTulip">
      <button type="button" name="btnTulips" class="BtnButton" 
    onclick="getPrice(object2);">Tulips</button>
    </div>
  </div>
  <div id="picPenguin">
    <img src="Images/penguin.jpg" alt="Penguins" />
    <div id="btnPenguin">
      <button type="button" name="btnPenguins" class="BtnButton" 
    onclick="getPrice(object3);">Penguins</button>
    </div>
  </div>
</div>
<div id="output"></div>
0
投票

这是你的代码的另一个版本（因为你标记了oop我为产品添加了一个类。你肯定不会因为很多原因而不将你的数据编码到javascript中，但这应该让你开始。字符串，S1001必须用单个或者javascript中的双引号被认为是有效的。

// This is a class in JS (older style)
function Product(data) {
  var self = this;
  
  self.ProdId = data.ProdId;
  self.SupplierCode = data.SupplierCode;
  self.Description = data.Description;
  self.PictureName = data.PictureName;
  self.QtyOnHand = data.QtyOnHand;
  self.Price = data.Price;
}

// Here is a list of your products in an array of 'Products'
var items = [
  new Product({
    ProdId: 1001,
    SupplierCode: 'S1001',
    Description: 'Koalas',
    PictureName: 'koala_PNG8',
    QtyOnHand: 9,
    Price: 119.95
  }),
  new Product({
    ProdId: 1002,
    SupplierCode: 'S1002',
    Description: 'Tulips',
    PictureName: 'laleh - piyaz.jpg',
    QtyOnHand: 9,
    Price: 119.95
  }),
  new Product({
    ProdId: 1004,
    SupplierCode: 'S1004',
    Description: 'Penguins',
    PictureName: 'penguins.jpg',
    QtyOnHand: 9,
    Price: 119.95
  })
]


function getPrice(productId) {
var product = items.find(function(product) { return product.ProdId = productId });
alert(product.Description + " costs " + product.Price);

}
<body>
  <div id="picBtn">
    <div id="picKoala">
      <img src="Images/koala_PNG8.png" alt="Koala" width="300" />
      <div id="btnKoala">
        <button type="button" name="btnKoalas" class="BtnButton" onclick="getPrice(1001);">Koalas</button>
      </div>
    </div>

    <div id="picTulip">
      <img src="Images/laleh-piyaz.jpg" alt="Tulips" />
      <div id="btnTulip">
        <button type="button" name="btnTulips" class="BtnButton" onclick="getPrice(1002);">Tulips</button>
      </div>
    </div>
    <div id="picPenguin">
      <img src="Images/penguin.jpg" alt="Penguins" />
      <div id="btnPenguin">
        <button type="button" name="btnPenguins" class="BtnButton" onclick="getPrice(1004);">Penguins</button>
      </div>
    </div>
  </div>
  <div id="output"></div>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.