使用javascript计算总价格

我做了一个小表格来测试一些东西，但我遇到了一个小问题，我真的不知道该如何解决。使用javascript计算总价格

我提出输入字段和改变价格当用户输入使用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('')); 
    } 
}

我有大约10种产品在我的形式，其我取下阵列的像这样：

<?php foreach($productsData as $productData):?> 
    <tr> 
     <td><?php echo $productData['product']?></td> 
     <td>&#8364; <?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;?>

我的数组是这样的：

<?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') 
    ); 
?>

这をrks都很好，但是我需要一个总价格，它将显示在底部，而当用户说增加1件产品时，它的成本是7美元，它会说7美元，但是当用户订购2美元的产品时，它将变成10美元$ 27.00

我希望我明确提出了我的问题，如果不是，请告诉我！

一个小的jsfiddle让您了解什么happeneing：http://jsfiddle.net/ygHSC/

在这个例子中，我没有拿出我所有的产品，我的数组，但我希望你明白我想要做的事。

来源

2014-01-30 Déjà vu

您需要的方法与某种遍历所有输入字段，就像你对一个字段创建的，每次一个字段更新触发电话：

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); 
    } 
}

的更新小提琴是here。

来源

2014-01-30 11:41:46

你完全按照我想要的那样摆弄作品，但是我无法在我自己的网站中找到它。我添加了getTotalprice（）;到changeTotalFromCount（输入）并添加你所做的全部功能。我也在这里添加了ID到总价中。奇怪... –

任何一种JS错误？任何机会，你可以发布一个URL来看看它？ –

正如你可以看到我的'ChangeTotalFromCount（）'看起来不同，那么也是在jsfiddle中使用的那个。其他有用的提示是，我有5个输入字段的形式，但这些不是产品，但为名称adres等 –

每次取总每一次添加，把它放在总价的地方，

来源

2014-01-30 11:25:57 Puttu

如果您要发布答案，您应该添加适当的内容，否则只是留下评论。 –

如何使用我的代码看起来如何？因为我真的不知道该怎么做。我得到的理论，但使用我的代码我有点困惑。 –

我会用change事件来更新每一个输入变量，并进行独立的小功能，它们加在一起并返回总数。

来源

2014-01-30 11:27:10 ElendilTheTall

这个理论很清楚，但是用我的代码和数组以及所有我感到困惑的javascript，你能解释一下你的意思，或者把我推向正确的方向吗？谢谢。 –

您有一个事件侦听器检查输入变化。当输入改变时，它取得输入的值，乘以单位价格，并调用总计函数。总计函数只是将两个小计加在一起，并设置任何要显示总数的元素的文本。 – ElendilTheTall

使用javascript计算总价格

回答

相关问题