Javascript guruları gelin 'disable elements'

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Yazılım Geliştirme Java Javascript guruları gelin 'disable elements'

Bu konudaki kullanıcılar: 1 misafir, 1 mobil kullanıcı

3
Cevap 454
Tıklama 0
Öne Çıkarma

1. sayfa

Javascript guruları gelin 'disable elements'

Cevap Yaz

Primat Operatörü

2 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>

_____________________________

Eski kullanıcı adı: SUBJECT 101

1. sayfa