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

LikapaTR

I LIKE TO BAN
Geliştirici
Emekli Üye
Mesaj
607
Çözümler
3
Beğeni
769
Puan
1.180
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:
Genişlet Daralt Kopyala
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.
 
Uyarı: Bu konu açıldığından bu yana baya zaman geçmiş.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.
Geri
Üst