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>CodePudding user response：
Spans do not have onl oad
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();
});
CodePudding user response：
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>