Javascript 在计算中使用输入字段的值,并在另一个元素中显示结果
我有一个购物车,每个产品都有一个价格、数量和小计字段。“数量”字段可以由用户更改,但其他字段是静态的 当用户更改数量时,是否有方法计算小计?我想将数量乘以价格,然后更新小计,而无需用户提交表单。此外,在计算小计时,也应更新总数 这里的视觉表现 我的代码是Django模板,如下所示,循环中有相关部分:Javascript 在计算中使用输入字段的值,并在另一个元素中显示结果,javascript,jquery,html,django,forms,Javascript,Jquery,Html,Django,Forms,我有一个购物车,每个产品都有一个价格、数量和小计字段。“数量”字段可以由用户更改,但其他字段是静态的 当用户更改数量时,是否有方法计算小计?我想将数量乘以价格,然后更新小计,而无需用户提交表单。此外,在计算小计时,也应更新总数 这里的视觉表现 我的代码是Django模板,如下所示,循环中有相关部分: <div class="container"> <table id="cart" class="table table-hover table-condensed">
<div class="container">
<table id="cart" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width:50%">Product</th>
<th style="width:10%">Price</th>
<th style="width:8%">Quantity</th>
<th style="width:22%" class="text-center">Subtotal</th>
</tr>
</thead>
{% for crops_ordered_names,crops_ordered_images,crops_ordered_cost,crops_ava in total %}
<tbody>
<tr>
<td data-th="Product">
<div class="row">
<div class="col-sm-2 hidden-xs"><img src="http://placehold.it/100x100" alt="..." class="img-responsive"/></div>
<div class="col-sm-10">
<h4 class="nomargin">{{crops_ordered_names}}</h4>
<p>Available amount: {{crops_ava}}</p>
</div>
</div>
</td>
<td data-th="Price" id="price">{{crops_ordered_cost}}</td>
<td data-th="Quantity">
<input type="number" class="form-control text-center" id="quan" min="1" max="{{crops_ava}}">
</td>
<td data-th="Subtotal" class="text-center" id="subtotal"></td>
<td class="actions" data-th="">
<button class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
</tbody>
{% endfor %}
<tfoot>
<tr class="visible-xs">
<td class="text-center"><strong>Total 1.99</strong></td>
</tr>
<tr>
<td colspan="2" class="hidden-xs"></td>
<td class="hidden-xs text-center" id="total"><strong>Total </strong></td>
</tr>
</tfoot>
</table>
产品
价格
量
小计
{作物订购名称、作物订购图像、作物订购成本、作物订购ava总计%}
{{crops_ordered_names}}
可用金额:{{crops_ava}}
{{作物订购成本}
{%endfor%}
总计1.99
总计
您需要做的第一件事是对HTML代码进行一个小的更改。由于您将列出多个产品,每个产品都有自己的价格、数量和小计,因此需要使用class
或数据属性,而不是id
,因为id
对于整个文档是唯一的,并且一个id只能使用一次。相关代码(在循环中)应如下所示:
{{crops_ordered_names}}
可用金额:{{crops_ava}}
{{作物订购成本}
您还需要更新表尾,以便“总计”单元格获得数据属性:
总计0
(需要span元素,因此我们只能更新数字。)
然后,下面的示例代码将执行此操作,在数量更改时更新小计。该代码可能无法在Internet Explorer中工作,因此如果需要,请告诉我。我还添加了一些评论,以帮助澄清在哪里发生了什么
//查找所有数量输入,以及显示总数的元素。
const quantityInputs=document.querySelectorAll(“[data type=“quan”]”);
const total=document.querySelector('[data type=“total”]span');
//为了简单起见,我们在一个单独的函数中计算总数。
const calculateTotal=()=>{
//找到所有小计。
const subtotals=document.querySelectorAll(“[data type=“subtotal”]”);
让calculatedTotal=0;
//循环遍历所有小计,并将它们添加到最终总数中。
数组.from(小计).forEach((小计)=>{
calculatedTotal+=数字(小计.文本内容);
});
//然后返回总数。
返回计算总数;
}
//如上所述,我们使用一个单独的函数来计算产品的小计。
const calculateSubtotal=(乘积)=>{
//当数量字段的值更改时,将触发输入事件。
product.addEventListener('input',()=>{
/*
*有多种价格和小计,我们需要寻找它们
*从数量字段向上,使用父元素(第一个
*表格单元格,然后是表格行)。
*/
const parentRow=product.parentNode.parentNode;
//然后找到该产品的价格和小计。
const price=parentRow.querySelector('[data type=“price”]');
const subtotal=parentRow.querySelector('[data type=“subtotal”]');
//最后,更新小计和总计。
subtotal.textContent=price.textContent*product.value;
total.textContent=calculateTotal();
});
}
//循环所有数量输入,等待小计更改。
from(quantityInputs).forEach((元素)=>calculateSubtotal(元素));
您需要做的第一件事是对HTML代码进行一个小的更改。由于您将列出多个产品,每个产品都有自己的价格、数量和小计,因此需要使用class
或数据属性,而不是id
,因为id
对于整个文档是唯一的,并且一个id只能使用一次。相关代码(在循环中)应如下所示:
{{crops_ordered_names}}
可用金额:{{crops_ava}}
{{作物订购成本}
您还需要更新表尾,以便“总计”单元格获得数据属性:
总计0
(需要span元素,因此我们只能更新数字。)
然后,下面的示例代码将执行此操作,在数量更改时更新小计。该代码可能无法在Internet Explorer中工作,因此如果需要,请告诉我。我还添加了一些评论,以帮助澄清在哪里发生了什么
//查找所有数量输入,以及显示总数的元素。
const quantityInputs=document.querySelectorAll(“[data type=“quan”]”);
const total=document.querySelector('[data type=“total”]span');
//为了简单起见,我们在一个单独的函数中计算总数。
const calculateTotal=()=>{
//找到所有小计。
const小计=document.q