Question

我正在尝试计算以下html代码的总价格，并将结果添加到下面的JS代码的dom中：

<div class="row">
<div class="col-xs-2 text-center">
<span class="p-name">IronBubble-head</span>
<span id="price-number">$25</span>
<label id="qty" for="qty">QTY</label><input type="number" value="1">
<span id="total">0</span>
<button class="btn btn-delete" type="button">Delete</button>
</div>
</div>

和这个javascript代码：

function getTotalPrice(e) {
var Price = document.getElementById('price-number').value;
var Quantity = document.getElementById('qty').value;
var Total = document.getElementById('total');
total.innerHTML = Price * Quantity;
}

虽然我得到的结果总是NaN。错误在哪里？

谢谢！

Answer 1

你的#price-number元素有$ character，你不能进行数学运算，所以你需要先干净。

所以你可以使用.replace删除$ character：

Price = Price.replace(/\$/, '');

而不是使用.value，您可以使用.innerHTML

var Price = document.getElementById('price-number').value;

另一件事是将id="qty"放在input元素中，因为值在那里。

就像那样：

function getTotalPrice() {
  var Price = document.getElementById('price-number').innerHTML;
  Price = Price.replace(/\$/, '');
  var Quantity = document.getElementById('qty').value;
  var Total = document.getElementById('total');
  total.innerHTML = Price * Quantity;
}

getTotalPrice();

<div class="row">
  <div class="col-xs-2 text-center">
    <span class="p-name">IronBubble-head</span>
    <span id="price-number">$25</span>
    <label for="qty">QTY</label><input id="qty" type="number" value="1">
    <span id="total">0</span>
    
    <button class="btn btn-calc" type="button" onclick="getTotalPrice()">Calc</button>
    <button class="btn btn-delete" type="button">Delete</button>
  </div>
</div>

Answer 2

您的代码商店＆＃34; $ 25＆＃34;作为变量Price中的字符串。你需要删除美元符号并解析＆＃34; 25＆＃34;字符串作为整数。例如，您可以在初始分配变量Price：

之后的任何位置将此行添加到代码中

Price = parseInt(Price.slice(1, Price.length));

Answer 3

您需要从价格值中删除任何非数字字符

var priceValue = parseFloat(Price.textContent.replace(/[^\d.]/, ''), 10)

完整代码

var Price = document.getElementById('price-number')
var Quantity = document.getElementById('qty')
var Total = document.getElementById('total')

function getTotalPrice() {
  var priceValue = parseFloat(Price.textContent.replace(/[^\d.]/, ''), 10)
  var quantityValue = parseFloat(Quantity.value, 10) || 0
  var totalValue = priceValue * quantityValue

  return totalValue
}

Quantity.addEventListener('input', function() {
    total.innerHTML = getTotalPrice()
})

JSFiddle演示：https://jsfiddle.net/mkpyvqfh/6/

将字符串转换为数字

3 个答案: