Dinamik İsimli Değişken Oluşturma - Vanilla JS

LikapaTR

I LIKE TO BAN
Admin
Geliştirici
Mesaj
588
Çözümler
3
Beğeni
735
Puan
814
Ticaret Puanı
0
Merhaba herkese, bir kaç ay önce bir projede çok ihtiyacım olan birşeydi.
Basitce dinamik değişkenler oluşturmak istiyordum fakat bu değişkenlerin isimlerininde değiştirilmesi gerekiyordu. Epeyce bir araştırmadan sonra "window" altında böyle birşeyin yapılabildiğini farkettim, tek negatif yönü ise bu değişkenlere heryerden erişilebiliyor olunması, tıpkı objeler gibi console üzerinden çağırılabiliyorlar,
ama ihtiyacınıza göre hayat kurtarıcıda olabilirler, kısaca oluşturma şeklini gösterip bir örnekle konuyu noktalayacağım.

window['input'+i]

Yukarıda gösterdiğim yapıyı kullanarak kendi değişkenlerinizi oluşturabilirsiniz, kısaca bahsetmek gerekirse;

Bu alanlar aslında window üzerinde değişkeni oluşturmak için değiştirmeden kullanmanız gereken bölümlerdir.
Bu bölüm ise değişken adınızda sabit olarak tutmak istediğiniz kısımdır, kullanmaya mecbur değilsiniz fakat genelde değişken isimlerinde kalıp bir ön ek bulunur, kullanmanızı tavsiye ederim.
Bu kısım ise özgünlüğü katacak olan bölüm aslında, i değerini neye eşitlerseniz, oluşacak değişken adında ö bölüm farklı olacaktır. Burada i kullanmak zorunda değilsiniz elbette, örnek olması açısından böyle bir gösterimde bulundum.
Beyaz alanlar ise standart javascript sembol/bağlaç kullanımlarıdır.Alternatiflerinide kullanabilirsiniz, size kalmış.

Örnek kullanım:


Ranking Example:
for (let i = 1; i <= 3; i++) {
  window['input'+i] = document.querySelectorAll('#radiobutton'+i+'-container input');
  window['mlabel'+i] = document.querySelectorAll('#radiobutton'+i+'-container .radioh-label');
  window['label'+i] = document.querySelectorAll('#radiobutton'+i+'-container .pure-radio');
  window['input'+i].forEach((inputs) => { inputs.style.display = 'none' });
  window['label'+i].forEach((label) => { label.insertAdjacentHTML('afterbegin', `<div class="star" style="color:gray;" >★</div>`) });
  window['star'+i] = document.querySelectorAll('#radiobutton'+i+'-container .star');
  let x = 0;
  window['mlabel'+i].forEach((mamLabel) => { mamLabel.setAttribute('for', 'radiobutton'+i+'-' + x); x++; });
  window['input'+i].forEach((inputs, index) => {

    inputs.addEventListener('change', function () {
    
      if (inputs.checked == 1) {
        for (let x = 0; x <= index; x++) {
          window['star'+i][x].setAttribute('style','color:gold;');
        }
        for (let y = index + 1; y < window['input'+i].length; y++) {
          window['star'+i][y].setAttribute('style','color:gray;');
        
        }
      }
    });
  });
  x = 0;
}


Burada bu yöntemi kullanarak oluşturulmuş bir yıldız puanı verme sistemi görebilirsiniz.
Umarım yeni birşeyler öğrenmenize yardımcı olmuştur, şimdilik benden bu kadar, iyi forumlar.
 
Geri
Üst