Javascript 更新文本字段的键控值

我有以下代码：

{% for product in app.session.get('aBasket') %}
    <input id="product_quantity_{{ product['product_id'] }}" class="form-control quantity" type="text" value="{{ product['product_quantity'] }}" name="" onkeyup="calculatePrice({{ product['product_price'] }},{{ product['product_id'] }})">
    <span id="total_price_{{ product['product_id'] }}">{{ product['product_quantity'] * product['product_price'] }}</span>
{%endfor}
<div id="total_price_basket">TOTAL:0</div>

{%用于app.session.get（'aBasket'）%%中的产品
{{产品['产品数量']*产品['产品价格']}
{%endfor}
总数：0

和我的js功能：

<script type="application/javascript">
    function calculatePrice(price, product_id) {
        var x = document.getElementById("product_quantity_"+product_id);
        var total_price = price * x.value;
        $("#total_price_"+product_id).html(total_price);
        $("#total_price_basket").html();
    }
</script>

函数计算价格（价格、产品id）{
var x=document.getElementById（“产品数量+产品id”）；
var总价=价格×价值；
$（总价+产品id）.html（总价）；
$（“#总价篮子”）.html（）；
}

---

所以，所有产品的价格都很好，问题是如何更改div>total\u price\u basket onkeyup的值？我必须收集每种产品的数量。你能帮我吗？Thx提前

最初，在呈现页面时，将total_price_basket设置为服务器提供的值。 在javascript中，设置一个全局变量来存储所有产品的总和：

var sum = 0;

然后在

calculatePrice

方法中附加以下两行：

sum += total_price;
$("#total_price_basket").html('TOTAL: ' + sum);

移除产品时，也要进行减法运算

<script type="application/javascript">
    var sum = 0;

    function calculatePrice(price, product_id) {
        var x = document.getElementById("product_quantity_"+product_id);
        var total_price = price * x.value;
        $("#total_price_"+product_id).html(total_price);
        sum += total_price;
        $("#total_price_basket").html('TOTAL: ' + sum);
    }
    </script>

var总和=0；
函数计算价格（价格、产品id）{
var x=document.getElementById（“产品数量+产品id”）；
var总价=价格×价值；
$（总价+产品id）.html（总价）；
总和+=总价；
$（“#总价篮子”）.html（'total:'+总和）；
}

用于将

字符串

转换为

浮点

：

函数的作用是：解析字符串参数并返回一个浮点数

见内联评论：

var total_price = 0; // Set default to zero
// ^^^^^^^^^^^^^^^^^
function calculatePrice(price, product_id) {
    var x = document.getElementById("product_quantity_" + product_id);
    var total_price = parseFloat(price) * parseFloat(x.value);
    //                ^^^^^^^^^^          ^^^^^^^^^^
    $("#total_price_" + product_id).html(total_price);
    $("#total_price_basket").html();
}

您可以尝试以下方法：

$(function(){
var price=100;
$('input.quantity').keyup(function(){

var all=$('input.quantity');
var total=0;
for(var i=0;i<all.length;i++){
   if(!isNaN(all[i].value)){
        total+=price*all[i].value
    }   
}
$("#total_price_"+product_id).html('TOTAL : '+total);
});   

});

$（函数（）{
var价格=100；
$（'input.quantity'）.keyup（函数（）{
var all=$（'input.quantity'）；
var合计=0；
对于（var i=0；i，我将使用jQuery，并摆脱突兀的内联事件处理程序。对于此HTML标记，将稍微更改以使用数据属性：

{%用于app.session.get（'aBasket'）%%中的产品
{{产品['产品数量']*产品['产品价格']}
{%endfor}
总数：0

JS:

演示：
试试这个

var x = document.getElementById("product_quantity_"+product_id);
        var total_price = price * x.value;
        console.log(x.value);

这是一家商店，仅1种产品的价格不计算总价。baketIt应该检查演示。Bizzare但不适用于我：（，每种产品的价格计算但总价不
var x = document.getElementById("product_quantity_"+product_id);
        var total_price = price * x.value;
        console.log(x.value);