So I am fetching the information in my JSP page using scriptlet. I need to calculate the total cost of the products .
<%
List<Products> listProducts = employeeService.listProducts();
for (Products product:listProducts){
%>
<tr>
<th><%=product.getProduct_id() %></th>
<td><%=product.getName() %></td>
<td>₹ <%=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>
How do i write a Javascript function for the same as I cannot assign ids to individual products here.
Add the class to product.getPrice() td. and iterate through tds.
JS:
const sum = Array.from(document.querySelectorAll(".productPrice"))
.map(priceBlock => priceBlock.innerHTML)
.reduce(((acc, price) => acc + +price), 0);
console.log(sum)