0
226
ViewsHow to calculate discount for all products
I just want to calculate all product price.
function getComboA() {
var price = parseFloat($(".original-price").html());
var korting = (Math.round((price - ((price) / 100) * 10)));
$(".discount").html("$" + korting + "");
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6./jquery.min.js"></script>
<div>$<span class="original" onload="getComboA()" ;>100</span> $<span class="discount"></span></div>
<div>$<span class="original" onload="getComboA()" ;>100</span> $<span class="discount"></span></div>
<div>$<span class="original" onload="getComboA()" ;>100</span> $<span class="discount"></span></div>
<div>$<span class="original" onload="getComboA()" ;>100</span> $<span class="discount"></span></div>
<div>$<span class="original" onload="getComboA()" ;>100</span> $<span class="discount"></span></div>
<div>$<span class="original">100</span> $<span class="discount"></span></div>
<div>$<span class="original" onload="getComboA()" ;>100</span> $<span class="discount"></span></div>
<div>$<span class="original" onload="getComboA()" ;>100</span> $<span class="discount"></span></div>
·
Juan Pablo Isaza
2 answers
Answer question0
Spans do not have onload
Perhaps you meant this
$(function() { // on page load
$(".discount").each(function() {
const price = +$(this).closest("div").find(".original").text();
const korting = (Math.round((price - ((price) / 100) * 10)));
$(this).text(korting)
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>$<span class="original">100</span> $<span class="discount"></span></div>
<div>$<span class="original">100</span> $<span class="discount"></span></div>
<div>$<span class="original">100</span> $<span class="discount"></span></div>
<div>$<span class="original">100</span> $<span class="discount"></span></div>
<div>$<span class="original">100</span> $<span class="discount"></span></div>
<div>$<span class="original">100</span> $<span class="discount"></span></div>
<div>$<span class="original">100</span> $<span class="discount"></span></div>
<div>$<span class="original">100</span> $<span class="discount"></span></div>Changes to your tab pen
https://codepen.io/mplungjan/pen/RwLadvW
$(function () {
// on page load
const setPercentage = (e) => {
let id; // why is this even neessary. Seems the active is not set on click
if (e) {
e.preventDefault();
id = $(e.target).attr("id")
}
else id = $("[data-toggle=pill].active").attr("id");
const percentage = parseInt(
$("#" + id.replace("-tab","")).text()
);
$(".discount").each(function () {
const price = +$(this).closest("div").find(".original").text();
const korting = Math.round(price - (price / 100) * percentage);
$(this).text(korting);
});
};
$("#pills-tab").on("click","[data-toggle=pill]",setPercentage)
setPercentage();
});
·
Juan Pablo Isaza
Report
0
Instead of having calling the function at every span, which ain't valid, what you can do is simply call the function at its container. In my example shown below, body is my container. You can loop over the tags using their class names and get the original amount and perform the required Math. Here's the example:
<html>
<body onload="getComboA()">
<div>$<span class="original">100</span> $<span class="discount"></span></div>
<div>$<span class="original">100</span> $<span class="discount"></span></div>
<div>$<span class="original">100</span> $<span class="discount"></span></div>
<div>$<span class="original">100</span> $<span class="discount"></span></div>
<script>
function getComboA() {
var sum = 0;
var originals = document.getElementsByClassName("original");
var discounts = document.getElementsByClassName("discount");
for(var i = 0; i < originals.length; i++){
var originalPrice = parseFloat(originals[i].innerHTML);
discounts[i].innerHTML = (Math.round((originalPrice - ((originalPrice) / 100) * 10)));
}
}
</script>
</body>
</html>
·
Juan Pablo Isaza
Report
Answer question