提问人：llmarketer 提问时间：7/9/2017 更新时间：7/9/2017 访问量：172
将字符串转换为数字
turning string into a number
问：
我正在尝试计算以下 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。 错误出在哪里？
谢谢！
答：
2赞
Phelipe Rocha
7/9/2017
#1
你的 #price 数字元素有 $ 字符，你不能进行数学运算，所以你首先需要 clean。
因此，您可以使用 $ 字符删除：.replace
Price = Price.replace(/\$/, '');
而不是使用，你可以使用.value.innerHTML
var Price = document.getElementById('price-number').value;
另一件事是将输入元素放入其中，因为值在那里。id="qty"
诸如此类：
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>评论
1赞
Carcigenicate
7/9/2017
这是一个相当单薄的答案。您应该解释您所做的更改及其重要性。
0赞
llmarketer
7/9/2017
非常感谢@PhelipeRocha我看到错误在于将 ID 放在标签上而不是数量 html 的输入。请问您为什么决定在 JS 中 Price 变量的末尾使用 .innerHTML？多谢！
0赞
Phelipe Rocha
7/9/2017
因为是一个垃圾邮件元素，并且值在 span 内。因此，要获得此值，需要使用它，并且需要从输入、选择和此类元素中获取值#price-number.innerHTML.value
0赞
bitwitch
7/9/2017
#2
您的代码将“$25”作为字符串存储在变量 Price 中。您需要删除美元符号并将“25”字符串解析为整数。例如，可以在初始赋值变量 Price 之后的任何位置将此行添加到代码中：
Price = parseInt(Price.slice(1, Price.length));
0赞
Miguel Mota
7/9/2017
#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/
评论