selamlar, uzamanlardan ufak bir yardıma ihtiyacım var.
30 üzerinde farkli IDlerde ürünlerim var. ürünler bir slide içinde tel döngü ile kendini loop ediyor. yani her ürünün benzersiz ID'si var.

30 farklı ürün. 30 farklı içerik. asagida belirttiğim kodlarla ürünlere ait div içine istatistikleri yazdırıyorum % olarak.

benim istegim her ürüne bunu yapabilmek.

asagida bulunan kod blokları sadece ilk div verisini getiriyor. her urun id'sine aynı JS kodlarını tekrar tekrar yazdırmak çözüm mü? 30 kere aynı kodu cagirmak cok hantal.

bilgisi olan arkadaslardan ricam

asagida kodlara gore DIV alanını looplamam lazim.

asagida bulunan kod looplana bilir mi? 1 js ile 2 farkli ID sahip DIV yazdırabilir miyim?



html kodum su;

 <h1 id="donation--UserTEST" class="donation--UserTEST"></h1>
<span id="donation--goalTEST" class="donation--goalTEST"></span>
<div class="donation--barTEST">
<div id="donation--progressTEST" class="donation--progressTEST" style="width: 0;"></div>
<div id="donation--numberTEST" class="donation--numberTEST" style="left: 0;"></div>
<span id="donation--statusTEST" class="donation--statusTEST"></span>
</div>

css kodum su

.donation--barTEST {
position: relative;
width: 100%;
height: 25px;
background-color: #e7edf4;
border-radius: 100px 0 0 100px;
}

.donation--progressTEST {
position: relative;
max-width: 100%;
height: 100%;
background-color: #47cf73;
transition: width 2s linear;
}

.donation--numberTEST {
transition: left 2s linear;
position: absolute;
top: -18px;
transform: translate(-50%, -100%);
padding: 4px 10px;
color: #47cf73;
font-size: 13px;
font-weight: 300;
background-color: #525961;
border-radius: 3px;
}

js kodum şu:

"use strict";

// Function to find percentage
function percentage(a, b) {
return a / b * 100 > 100 ? 100 : a / b * 100;
}

//On Window Load
window.onload = function() {

//UserTEST Object
var UserTEST = {
name: "Francisdco",
donationCollectTEST: 15,
donationGoalTEST: 100
};

// IDs
var donationUserTEST = document.getElementById("donation--UserTEST"),
donationprogressTEST = document.getElementById("donation--progressTEST"),
donationnumberTEST = document.getElementById("donation--numberTEST"),
donationGoalTEST = document.getElementById("donation--goalTEST"),
donationstatusTEST = document.getElementById("donation--statusTEST");

var percent = percentage(UserTEST.donationCollectTEST, UserTEST.donationGoalTEST);
donationUserTEST.innerHTML = "Your progressTEST <span class='green'>" + UserTEST.name + "<span>";
donationprogressTEST.setAttribute("style", "width:" + percent + "%");
donationnumberTEST.setAttribute("style", "left:" + percent + "%");
donationnumberTEST.innerHTML = percent + "%";
donationstatusTEST.innerHTML = + (UserTEST.donationGoalTEST - UserTEST.donationCollectTEST) ;

};