編輯數量使用Javascript價格將調整

Question

我目前正在做一個在線購物車上的項目，客戶可以在結賬前編輯數量。我想這樣做，當客戶編輯數量時，項目的價格和所有項目的總價格將會被調整。我知道我可以實現，雖然JavaScript。無法真正工作和理解它。如果有人能幫助我，那將會很好。非常感謝你！ PS：我不知道如果我的代碼是正確的，但這裏是我的嘗試：

<script type="text/javascript"> 
    function update(form){ 
    var quantity = document.getElementById('#quantity'); 
    var price = quantity * ($list['price']); 
    document.getElementById("price").value = price; 
    ​} 
    </script>` 

因爲價格本身不工作我還沒有總價格做呢。我知道我錯過了一些東西。希望有人能啓發我。

我的HTML：

`//database query 

<td align='middle'><input type="number" onChange="update(this)" id="quantity" name="quantity" min="1" max='<?php echo $list['quantity'] ?>' value='1'></td> 

<td><input type="text" id="price" value='<?php echo $list['price'] ?>' readonly></td> 

<td><input type="text" name="amount" id="amount" readonly></td>` 

我可能犯愚蠢的錯誤，所以這將是很好，如果有人會如何，如果我得到了錯誤的概念，JavaScript的工作解釋。感謝這麼多的幫助!! :)

Answer 1

看到演示here

看這條線

quantity = document.getElementById('#quantity'); 

在此行中刪除 '＃'

quantity = document.getElementById(**'quantity'**); 

，並使用parseInt函數來轉換爲整數

var price = quantity * ($list['price']); 

$表[ '價格']假

得到你需要做這樣的價格：

document.getElementById('price').value; 

最後的代碼是：

form.php的

//database query 

<td align='middle'><input type="number" onChange="update(this)" id="quantity" name="quantity" min="1" max='<?php echo $list['quantity'] ?>' value='1'></td> 

<td><input type="text" id="price" value='<?php echo $list['price'] ?>' readonly></td> 

<td><input type="text" name="amount" id="amount" readonly></td>` 

script.js

<script type="text/javascript"> 
     function update(form){ 
    var quantity = document.getElementById('quantity').value; 

    var price = document.getElementById("price").value; 
    price = parseInt(price); 
    quantity = parseInt(quantity); 

    var amount= quantity * price ; 

    document.getElementById("amount").value = amount; 
} 


     </script>` 

Answer 2

演示here

的index.php

<form> 
<table> 
    <thead> 
    <tr> 
     <th>quantity</th> 
     <th>price</th> 
     <th>amount</th> 
    </tr> 
    </thead> 
    <tbody> 

    <!-- if u use php 
    <?php foreach($i=0; $i<$count; $i++){ ?> 
    <tr> 
    <td><input type="number" id="quantity_$i" name="quantity_$i" min="1" max='20' value='1' 
    onChange="iteration = 1; update(iteration)" > 
    </td> 
    <td><input type="text" id="price_$i" value='25' readonly='readonly' ></td> 
    <td><input type="text" name="amount_$i" id="amount_$i" readonly value='25'></td> 
    </tr> 
    <?php } ?> 
    --> 
    <tr> 
     <td><input type="number" id="quantity_1" name="quantity_1" min="1" max='20' value='1' 
     onChange="iteration = 1; update(iteration)" > 
     </td> 
     <td><input type="text" id="price_1" value='25' readonly='readonly' ></td> 
     <td><input type="text" name="amount_1" id="amount_1" readonly value='25'></td> 
    </tr> 

    <tr> 
     <td><input type="number" id="quantity_2" name="quantity_2" min="1" max='20' value='1' 
     onChange="iteration = 2; update(iteration)" > 
     </td> 
     <td><input type="text" id="price_2" value='15' readonly='readonly' ></td> 
     <td><input type="text" name="amount_2" id="amount_2" readonly value='15'></td> 
    </tr> 

    </tbody> 
</table> 
</form> 

的script.js

功能更新（迭代）{

// alert(iteration); 

var quantity = document.getElementById('quantity_' + iteration).value; 
// alert('quantity_' + iteration); 

var price = document.getElementById('price_' + iteration).value; 
price = parseInt(price); 
quantity = parseInt(quantity); 

var amount= quantity * price ; 

document.getElementById('amount_' + iteration).value = amount; 

}