使用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計算總價格

回答

相關問題