v2.5.2
Giriş yap

js arraydaki değeri yenileme hakkında

memdhaci
491 defa görüntülendi ve 2 kişi tarafından değerlendirildi

benim böyle bi kodum var arraydeki testName leri foreach ile alıp li etiketiyle ekrana yazdırıyom

let testNames = [ {testName: 'test'}, {testName: 'test2'} ];

const container = document.getElementById('container');
let a;
testNames.forEach(function(x){
    a = document.createElement('li')
    a.classList.add('li-item')
  
    a.innerHTML += `<p>${x.testName}</p>`;
    container.appendChild(a)
})

daha sonra bu kod ile arraydeki değeri değiştiriyorum

testNames[0].testName = 'name changed';

arraydadaki değer değişiyor ama ekranda yazan değişmiyor, bunu yeni değer ile ekrana yazdırmak için ne yapmalıyım?

Cevap yaz
Cevaplar (5)
ilyasbilgihan
1042 gün önce

Arkadaşların sunduğu kodlar çalışır(kısmen) fakat her update işleminde tüm li elemanları güncellenir. Eğer container listesi çok fazla li içeriyorsa ve/veya içerdiği her li elemanı p harici başka elementler de içerecekse üstüne buna CSS de eklenince yavaşlık meydana gelebilir.

Dolayısıyla bu işi ID kullanarak yapman daha faydalı olacaktır. Aşağıya çalışan bir demo linki bırakıyorum. Bunu kendi ihtiyaçların doğrultusunda güncelleyebilirsin.

Dynamic Elements - Prototurk

aziz1235
1042 gün önce

eğer yeni değeri ve eski değeri yazdırmak istiyorsan tayfun erbilenin Javascript spread ve rest operatörleri videosunu izleyebilirsin

eğer dinamik olarak verdiğin değer olsun istiyosan fonksiyon kullanman gerek

const container = document.getElementById('container');
let a;
let testNames = [];

function deneme(deger){
    testNames = [{testName: deger}];
    
        testNames.forEach(function(x){
        a = document.createElement('li')
        a.classList.add('li-item')
      
        a.innerHTML += `<p>${x.testName}</p>`;
        container.appendChild(a)
    });
}

deneme('name changed');

test edemedim umarım dogrudur istediğin böyle bişeyse tabi

memdhaci
1044 gün önce

:/

memdhaci
1046 gün önce

başka yolu var mıdır

trsherlock
1048 gün önce
let testNames = [ {testName: 'test'}, {testName: 'test2'} ];
function createElement(testNames) {
const container = document.getElementById('container');

testNames.forEach(function(x){
let li;
    li = document.createElement('li')
    li.classList.add('li-item')
  
    li.innerHTML += `<p>${x.testName}</p>`;
    container.innerHTML(li)
})
}

testNames[0].testName = 'name changed';

createElement(testNames)

Ekrana yazdırmış olduğun değerleri tekrar güncellemen gerekiyor. Şimdi işlemi nasıl yaptırıyorsun bilmiyorum sadece dizi içindeki nesneyi değiştiriyorsan çalışmaz zaten.
Eğer tekrar foreach kullanıyorsan appendChild kullandığın için üstüne ekleme yapar o yüzden innerHtml kullanarak eski değerleri silmesini ve yeni değerleri yazmasını sağlarsın.
Uzman bir arkadaş farklı bir bakış açısı ile benden daha faydalı olabilir. Test edemediğim zaman kod hatası yapabailiyorum.