如何使用javascript从产品列表中计算总计费成本?

Question

所以我使用scriptlet在JSP页面中获取信息。我需要计算一下产品的总成本。

<%
List<Products> listProducts = employeeService.listProducts();
for (Products product:listProducts){
%>
<tr>
<th><%=product.getProduct_id() %></th>
<td><%=product.getName() %></td>
<td>&#8377; <%=product.getPrice() %></td>
<td><%=product.getCategory() %></td>
<td><input type="checkbox" name="addProduct"></td>
</tr>

<%} %>

</tbody>

<tr><input type="button" value="calculate" onclick="calculate()">Calculate</tr>
</table>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="shippingCost">Shipping Cost</label> <input type="number"
class="form-control" id="shippingCost">
</div>
<div class="form-group col-md-6">
<label for="totalOrderValue">Total Order Value</label> <input type="number"
class="form-control" id="totalOrderValue">
</div>
</div>

我如何写一个Javascript函数，因为我不能在这里为单个产品分配id。

Answer 1

将该类添加到product.getPrice()td。并遍历tds

JS:

const sum = Array.from(document.querySelectorAll(".productPrice"))
.map(priceBlock => priceBlock.innerHTML)
.reduce(((acc, price) => acc + +price), 0);
console.log(sum)