[英]Calculating total price using javascript
I made a little form to test some things in, but i've come across a little problem i don't really know how to solve. 我做了一些表格来测试一些东西,但是遇到了一个小问题,我真的不知道如何解决。
I made input fields and a price that changes when the user inputs a different number using javascript, which looks like this: 我创建了输入字段,并且价格在用户使用javascript输入不同数字时发生了变化,如下所示:
function changeTotalFromCount(input) {
var unitPrice = parseFloat(input.getAttribute("data-unitPrice"));
var count = input.value;
var price = unitPrice * count;
var formattedPrice = '\u20ac ' + price.toFixed(2);
var label = input.parentNode.nextElementSibling;
label.innerHTML = '';
if (count != ''){
label.appendChild(document.createTextNode(formattedPrice));
} else {
label.appendChild(document.createTextNode(''));
}
}
I have around 10 products in my form which i take out of my array like this: 我的表格中大约有10种产品,它们是从我的阵列中取出的,例如:
<?php foreach($productsData as $productData):?>
<tr>
<td><?php echo $productData['product']?></td>
<td>€ <?php echo $productData['price']?></td>
<td><input type="number" id="count<?php echo $productData['code']?>" class="formnumbers" name="<?php echo $productData['name']?>" onChange="validateForm(this);changeTotalFromCount(this);" min="1" max="99" data-unitprice="<?php echo $productData['price']?>"/></td>
<td><span id="total<?php echo $productData['code']?>"></span></td>
</tr>
<?php endforeach;?>
My array looks like this: 我的数组如下所示:
<?php
$productsData = array(
array( 'product' => 'Pizza Margherita', 'code' => 'Margherita', 'name' => 'PizzaMargherita', 'price' => '7.00'),
array( 'product' => 'Pizza Fungi', 'code' => 'Fungi', 'name' => 'PizzaFungi', 'price' => '8.00'),
array( 'product' => 'Pizza Hawai', 'code' => 'Hawai', 'name' => 'PizzaHawai', 'price' => '9.00'),
array( 'product' => 'Pizza QuattroStagioni', 'code' => 'QuattroStagioni', 'name' => 'PizzaQuattroStagioni', 'price' => '11.00'),
array( 'product' => 'Pizza Calzone', 'code' => 'Calzone', 'name' => 'PizzaCalzone', 'price' => '13.00'),
array( 'product' => 'Broodje Shoarma', 'code' => 'BroodjeShoarma', 'name' => 'BroodjeShoarma', 'price' => '5.00'),
array( 'product' => 'Broodje Doner', 'code' => 'BroodjeDoner', 'name' => 'BroodjeDoner', 'price' => '5.50'),
array( 'product' => 'Durum Doner', 'code' => 'DurumDoner', 'name' => 'DurumDoner', 'price' => '6.00'),
array( 'product' => 'Knoflook Saus', 'code' => 'KnoflookSaus', 'name' => 'KnoflookSaus', 'price' => '0.50'),
array( 'product' => 'Whiskey Saus', 'code' => 'WhiskeySaus', 'name' => 'WhiskeySaus', 'price' => '0.50'),
array( 'product' => 'Sambal Saus', 'code' => 'SambalSaus', 'name' => 'SambalSaus', 'price' => '0.50')
);
?>
This works all fine, but i need a total price, which will display at the bottom, and when the user say adds 1 product that costs $ 7.00 it will say 7, but when the user order 2 products that cost $ 10.00 it will change to $ 27.00 这一切正常,但我需要总价,这将显示在底部,并且当用户说添加1件商品的价格为7.00美元时,它会说7,但是当用户订购2件商品的价格为10.00美元时,它会更改至$ 27.00
I hope i made my question clear, if not please tell me! 我希望我能清楚地说明我的问题,否则请告诉我!
A small JSFiddle so you understand whats happeneing: http://jsfiddle.net/ygHSC/ 一个小的JSFiddle,以便您了解发生了什么: http : //jsfiddle.net/ygHSC/
In this example i didn't take out all my products with my array but i hope you get what i'm trying to do. 在这个例子中,我并没有将所有产品都带到我的阵列中,但是我希望你能得到我想要做的。
You need a method with some kind of a loop over all your input fields, just like the one you created for one field, and trigger the call each time one field is updated: 您需要一种在所有输入字段上都有某种循环的方法,就像您为一个字段创建的那样,并在每次更新一个字段时触发调用:
function getTotalPrice() {
var total = 0,
inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
if(inputs[i].value) {
total += parseFloat(inputs[i].getAttribute("data-unitPrice")) *
parseInt(inputs[i].value,10);
}
}
if(total > 0) {
document.getElementById('TARGET').innerText = '\u20ac ' + total.toFixed(2);
}
}
取每个总数,每次相加,放在总价的位置,
我将使用change
事件来更新每个输入的变量,并制作一个小的单独函数以将它们加在一起并返回总数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.