如何在Html5中使用JavaScript在div-boxes中計數「data-price」屬性，當某些東西被丟棄時？

-3

我想通過javascript總結我的div盒的數據屬性「data-price」中的數字總和，並將結果顯示在div框中。如何在Html5中使用JavaScript在div-boxes中計數「data-price」屬性，當某些東西被丟棄時？

我的問題是，我得到了下面的Java腳本，但它計算的投入，而不是我的div箱「數據價格」 -attributes只值：

<script type="text/javascript"> 
function findTotal(){ 
var arr = document.getElementsByName('qty'); 
var tot=0; 
for(var i=0;i<arr.length;i++){ 
    if(parseInt(arr[i].value)) 
     tot += parseInt(arr[i].value); 
} 
document.getElementById('total').value = tot; 
} 
</script>

我格框：

<div name="qty" data-price="1.12" dragable="true">Text</div>

輸出格框：

<div id="total">0</div>

我有什麼改變？

來源

2016-12-24 Jolp

'java'是**不像'javascript'一樣**！ – Andreas

好像你問如何訪問html5中的數據屬性，所以也許你應該嘗試[**搜索網頁**]（https://www.google.com/search?q=access+data+屬性+ in + html5），你將學習如何。 – Andreas

我希望腳本總結所有數據屬性「data-price」的數字。 – Jolp

當你做到以下幾點：

if (parseInt(arr[i].value))

您試圖訪問元素的值屬性，沒有默認的HTML 值屬性。您似乎想要訪問數據價格（非值）屬性，它是data-* attribute。此外，你有花車，而不是整數，所以在使用：

if (parseFloat(arr[i].dataset.price))

例如

window.onload = function() { 
 
    var total = 0; 
 
    var nodes = document.getElementsByName('qty'); 
 
    [].forEach.call(nodes, function(node) { 
 
    console.log(node.dataset.price); 
 
    total += parseFloat(node.dataset.price) 
 
    }) 
 
    console.log('Total: ' + total); 
 
}

<div name="qty" data-price="1.12" dragable="true">This one costs 1.12</div> 
 
<div name="qty" data-price="1.45" dragable="true">This one costs 1.45</div>

有很多問題，這裏大約displaying values as currency答案。

來源

2016-12-24 08:07:42 RobG

我可以同時顯示兩個十進制數嗎？ – Jolp

如何在Html5中使用JavaScript在div-boxes中計數「data-price」屬性，當某些東西被丟棄時？

回答

相關問題