js arraydaki değeri yenileme hakkında
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?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (5)
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.
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
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.