如何在javascript中使用on函数获取产品的价值答案

【问题标题】：how to get the value of products using on function in javascript如何在javascript中使用on函数获取产品的价值
【发布时间】：2018-03-22 14:54:59
【问题描述】：

想要使用 Javascript 函数来获取产品价值的价格，并在每次点击按钮时将其添加到现有价值使用“THIS”关键字来获取价格的那些值。如果对“THIS”关键字有明确的解释，那就太好了

var total = document.getElementById('total');
var price = document.getElementById('price').value
var quantity = document.getElementById('quantity').value;

var i = 0;
var totalPrice = 0;
function add() {
  i++
  totalPrice = Number(this.totalPrice) + Number(this.price);
  total.innerHTML = "Total Price: " + totalPrice;
}

<div class="row">
  <div class="col-sm-6 ">
    <img src="Products/blackberry.jpg" class="product_pics" />
    <h3 id="name">Blackberry</h3>
    50,000 <input type="number" name="" id="price" value="50000"><br> Quantity <input type="number" name="quantity" id="quantity" min="1" max="50">
    <button class="AddtoCart" onclick="add(this)">ADD TO CART</button>
  </div>

  <div class="col-sm-6">
    <img src="Products/iphone5.jpeg" class="product_pics" />
    <h3 id="name">IPHONE 3</h3>
    100,000 <input type="number" name="" id="price" value="100000"><br> Quantity <input type="number" name="quantity" id="quantity" min="1" max="50">
    <button class="AddtoCart" onclick="add(this)">ADD TO CART</button>
  </div>

  <div class="col-sm-6">
    <img src="Products/iphone6.jpg" class="product_pics" />
    <h3 id="name">IPHONE 6</h3>
    90,000 <input type="number" name="" id="price" value="90000"><br> Quantity <input type="number" name="quantity" id="quantity" min="1" max="50">
    <button class="AddtoCart" onclick="add(this)">ADD TO CART</button>
  </div>

  <div class="col-sm-6">
    <img src="Products/samsung.jpg" class="product_pics" />
    <h3 id="name">IPHONE 6</h3>
    250,000 <input type="number" name="" id="price" value="250000"><br> Quantity <input type="number" name="quantity" id="quantity" min="1" max="50">
    <button class="AddtoCart" onclick="add(this)">ADD TO CART</button>
  </div>

  <div class="col-sm-6">
    <img src="Products/3.png" class="product_pics" />
    <h3 id="name">Red band WristWatch</h3>
    10,000 <input type="number" name="" id="price" value="10000"><br> Quantity <input type="number" name="quantity" id="quantity" min="1" max="50">
    <button class="AddtoCart" onclick="add(this)">ADD TO CART</button>
  </div>
  <div class="col-sm-6 ">
    <img src="Products/2.JPG" class="product_pics" />
    <h3 id="name">Female wrist Watch</h3>
    250,000 <input type="number" name="" id="price" value="250000"><br> Quantity <input type="number" name="quantity" id="quantity" min="1" max="50">
    <button class="AddtoCart" onclick="add(this)">ADD TO CART</button>
  </div>
</div>

【问题讨论】：

您缺少一个名为 total 的 div 或 span
那里居然忘了贴代码
您也不能在函数中使用this，因为您正在传递对象而不是将添加分配给事件此外您感兴趣的this.totalPrice 和this.price 对按钮不可用
那我该怎么办？

标签： javascript html this

【解决方案1】：

您忘记了总跨度
this.totalPrice和this.price你感兴趣的按钮都没有
您需要唯一的 ID，但我正在使用类代替

你可能想要这个：

var total = document.getElementById('total');

var totalPrice = 0;

function add() {
  var qs = document.querySelectorAll(".quantity");
  var price = document.querySelectorAll(".price"); // assuming one of each
  var totalPrice = 0;
  for (var i = 0; i < qs.length; i++) {
    var q = qs[i].value;
    q = isNaN(q) || q.trim() == "" ? 0 : parseInt(q); // make sure it's a number
    if (q) {
      totalPrice += q * price[i].value; // grab the value from the corresponding price
    }
    document.getElementById("total").innerHTML = "Total Price: " + totalPrice.toFixed(2);
  }
}

<div class="row">
  <div class="col-sm-6 ">
    <img src="Products/blackberry.jpg" class="product_pics" />
    <h3 id="name">Blackberry</h3>
    50,000 <input type="number" name="bb" class="price" value="50000"><br> Quantity <input type="number" name="quantity" class="quantity" min="0" max="50" value="0">
    <button class="AddtoCart" onclick="add()">ADD TO CART</button>
  </div>

  <div class="col-sm-6">
    <img src="Products/iphone5.jpeg" class="product_pics" />
    <h3 id="name">IPHONE 5</h3>
    100,000 <input type="number" name="iphone5" class="price" value="100000"><br> Quantity <input type="number" name="quantity" class="quantity" min="0" max="50" value="0">
    <button class="AddtoCart" onclick="add()">ADD TO CART</button>
  </div>

  <div class="col-sm-6">
    <img src="Products/iphone6.jpg" class="product_pics" />
    <h3 id="name">IPHONE 6</h3>
    90,000 <input type="number" name="iphone6" class="price" value="90000"><br> Quantity <input type="number" name="quantity" class="quantity" min="0" max="50" value="0">
    <button class="AddtoCart" onclick="add()">ADD TO CART</button>
  </div>

  <div class="col-sm-6">
    <img src="Products/samsung.jpg" class="product_pics" />
    <h3 id="name">Samsung</h3>
    250,000 <input type="number" name="Samsung" class="price" value="250000"><br> Quantity <input type="number" name="quantity" class="quantity" min="0" max="50" value="0">
    <button class="AddtoCart" onclick="add()">ADD TO CART</button>
  </div>

  <div class="col-sm-6">
    <img src="Products/3.png" class="product_pics" />
    <h3 id="name">Red band WristWatch</h3>
    10,000 <input type="number" name="ww" class="price" value="10000"><br> Quantity <input type="number" name="quantity" class="quantity" min="0" max="50" value="0">
    <button class="AddtoCart" onclick="add()">ADD TO CART</button>
  </div>
  <div class="col-sm-6 ">
    <img src="Products/2.JPG" class="product_pics" />
    <h3 id="name">Female wrist Watch</h3>
    250,000 <input type="number" name="fmw" class="price" value="250000"><br> Quantity <input type="number" name="quantity" class="quantity" min="0" max="50" value="0">
    <button class="AddtoCart" onclick="add()">ADD TO CART</button>
  </div>
</div>
<span id="total"></span>

【讨论】：