Arama butonu
Bu konudaki kullanıcılar: 1 misafir
3
Cevap
395
Tıklama
0
Öne Çıkarma
Javascript guruları gelin 'disable elements'
S
geçen yıl
Yüzbaşı
Konu Sahibi

Javascript ile resmin eşini bulma oyunu yapıyorum ama elementleri click olayı için disable konusunda başarısız oldum. Nasıl yazarsam yazayım eşi bulunan resimler disable olmuyor. Ayrıca bir div nesnesine tıklandığında, o divin rotate animasyonu süresi boyunca tüm diğer divlerin disable olması lazım. Container büyüklüğünde bir divin animasyon süresi boyunca z-indexini 9999 yapsam olur mu bilmiyorum henüz denemedim. Nasıl yapabilirim? Kodlar aşağıda.

<script type="text/javascript">

    //Find Pair Game
    var x = 0; // for first element's inner HTML to check pair.
    var y = 0; // for second element's inner HTML to check pair.
    var n = 0; // for first element's ID
    var m = 0; // for second element's ID
    var numbers = document.querySelectorAll('.number'); // all 'number' class elements
    var numb = document.getElementById('event-con'); // Event container

    // Start Button
    document.getElementById('start').onclick = function () {

        // array for random inner HTML
        var inhtml = [9, 5, 1, 12, 7, 3, 9, 6, 1, 12, 4, 8, 11, 2, 10, 3, 4, 7, 8, 2, 11, 5, 6, 10];
        var ran; // for random number
        var sayi; // for a number from "inhtml"

        // to give random numbers to inner HTML for all elements
        for (i = 24; i > 0; i--) {
            ran = Math.floor(Math.random() * i);
            sayi = inhtml[ran];
            numb.children[i].innerHTML = sayi;
            inhtml.splice(ran, 1); // number deleted from inhtml

            console.log(`i = ${i} ran = ${ran}`);
        }
    }

    // to get ID of elements
    numbers.forEach(function (item) {
       
        item.addEventListener('click', function (e) {
            if (n == 0) {
                n = e.target.id;
            } else {
                m = e.target.id;
            }
        });
    });

    numbers.forEach(function (item) {

        item.onclick = function () {

            item.style.animation = "rotate 2s forwards";
            item.style.backgroundImage = `url(img/${item.innerHTML}.jpg)`;

            // to check pair
            if (x == 0) {
                x = item.innerHTML;
            } else if ((x > 0) && (y == 0)) {
                y = item.innerHTML;
                if (x != y) { // if they are not pair turn back again
                    document.getElementById(n).style.animation = "rotate2 6s forwards";
                    document.getElementById(m).style.animation = "rotate3 6s forwards";
                    n = 0;
                    m = 0;
                    x = 0;
                    y = 0;
                } else if(x == y){ // if they are pair, disable them to click (failed)
                    document.getElementById(n).disabled = true;
                    document.getElementById(m).disabled = true;
                    n = 0;
                    m = 0;
                    x = 0;
                    y = 0;
                }
            }
            console.log(`x = ${x} y = ${y}       n = ${n} m = ${m}`);
        }
    });


</script>



R
geçen yıl
Yüzbaşı

@SUBJECT 101

disabled özelliği sadece form ögelerinde çalışır (input, select, button gibi). Diğer html elementlerinde disabled çalışmayacaktır. Onun yerine css'deki pointer-events'ı kullanabilirsin.





< Bu mesaj bu kişi tarafından değiştirildi Revolution -- 22 Haziran 2023; 13:58:16 >
Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @SUBJECT 101
S
geçen yıl
Yüzbaşı
Konu Sahibi

Teşekkürler hocam deneyeceğim.




Bu mesajda bahsedilenler: @Revolution
S
12 ay
Er

Şöyle yapabilirsin. disabled değilde o item'a bir özellik eklersin örneğin data-match="1" gibi. Tıklandan item'da bu özellik varsa tıklama fonksiyonunun içerisini çalıştırmazsın.



DH Mobil uygulaması ile devam edin. Mobil tarayıcınız ile mümkün olanların yanı sıra, birçok yeni ve faydalı özelliğe erişin. Gizle ve güncelleme çıkana kadar tekrar gösterme.