js htmlcollection içindeki butonlara click yapılması

arifcelik 1070 gün önce

329 defa görüntülendi

class' ına göre aldığım bir dizi buton var. butonlara tıklandığında da ortaya çıkan inputlar var. sırasıyla butonlara tıklayıp çıkan inputlardan ikincisinin value sunu değiştirmek için aşağıdaki kodu kullandım ama istediğimi yapamadım.

const butonlar = document.getElementsByClassName('fa-edit');

async function degistir() {
    for (buton of butonlar) {
        await buton.click();
        let inputlar = document.getElementsByClassName('submit-form__input');
        inputlar[1].value = 'deneme';
    }
}

async kullanmadan denediğimde hiçbir işlem yapmadı. async ile de rejected bir promise (inputlar undefined) döndü.

javascript

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (1)

ebykdrms

1070 gün önce

Merhaba. Bu sayfadayken firebug console'u açıp aşağıdaki kodları yapıştırırsanız sizinkine benzer bir test ortamını bu sayfada oluşturabilirsiniz:

$("body").prepend(`<div id="test"></div>`);
const $test = $("body > #test");

$test.append(`
    <style>
        #test { display:flex; flex-direction:row; align-items:flex-start; justify-content:space-evenly; width:100vw; padding:0 10px; }
        #test > div { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; flex:1; margin:10px; }
        #test > div > button.fa-edit { margin:5px; padding:10px; border:none; background:#ccc; color:#000; width:100%; cursor:pointer; }
        #test > div > div { width:100%; display:flex; flex-direction:column; padding:5px 0; }
        #test > div > div > input.submit-form__input { border:1px solid #ccc; background:#fff; padding:10px 0; text-indent:10px; margin:5px 0; }
    </style>
`);

$test.append(`<div><button class="fa fa-edit">Buton A</button></div>`);
$test.append(`<div><button class="fa fa-edit">Buton B</button></div>`);
$test.append(`<div><button class="fa fa-edit">Buton C</button></div>`);

$buttons = $test.find("> div > button.fa-edit");
$buttons.on("click", function() {
    $(this).next("div").remove();
    $(this).after("<div></div>");
    $inputContainer = $(this).next("div");
    $inputContainer.append(`<input type="text" class="submit-form__input" value="${$(this).text().replace("Buton","Değer")} 1" />`);
    $inputContainer.append(`<input type="text" class="submit-form__input" value="${$(this).text().replace("Buton","Değer")} 2" />`);
    $inputContainer.append(`<input type="text" class="submit-form__input" value="${$(this).text().replace("Buton","Değer")} 3" />`);
    $inputContainer.append(`<input type="text" class="submit-form__input" value="${$(this).text().replace("Buton","Değer")} 4" />`);
});

Kodu çalıştırdığınızda sayfanın üstünde sizinkiyle aynı class'a sahip 3 buton belirecek ve butonlara tıklandığında da sizinkilerle aynı class'lara sahip 4 input oluşacak.

Sizdeki kodları böylece simule ettikten sonra sizin yazdığınız kodu async/await olmadan yazıp çalıştırdım:

const butonlar = document.getElementsByClassName('fa-edit');
function degistir() {
    for (buton of butonlar) {
        buton.click();
        let inputlar = document.getElementsByClassName('submit-form__input');
        inputlar[1].value = 'deneme';
    }
}
degistir();

Sonuç olarak bütün butonlara basıldı ve input'lar oluştu ama sizde de olduğu gibi 2.input'a "deneme" yazmadı. Aynen sizin de düşündüğünüz gibi bir durum var. Aslında kodunuz doğru ama butona tıklandığında input'lar oluşturulması henüz tamamlanmadığı için input'u bulup değişiklik yapamıyordu.
Sonra sizin denediğiniz gibi async/await ile denedim:

const butonlar = document.getElementsByClassName('fa-edit');

async function degistir() {
    for (buton of butonlar) {
        await buton.click();
        let inputlar = document.getElementsByClassName('submit-form__input');
        inputlar[1].value = 'deneme';
    }
}
degistir();

Böyle yapınca da tıpkı sizdeki gibi bir Promise döndü. Bu normal. Oluşturduğunuz fonksiyon async olduğu için Promise dönüyor. Promise sonucunu elde etmek için fonksiyonu çağırırken await kullanmalısınız. Böylece fonksiyonunuz içindeki await sonucu tamamlanmadan (butonlara tıklanma olayının işlemleri bitmeden) sonraki işlemlere geçmeyecektir.

Cevabı lüzumsuzca uzattıktan sonra :D aslında tek satırda verebileceğim cevap şu:
await degistir(); olarak deneyin.

#009864