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; } }); });
// 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>
DH forumlarında vakit geçirmekten keyif alıyor gibisin ancak giriş yapmadığını görüyoruz.
Üye olduğunda özel mesaj gönderebilir, beğendiğin konuları favorilerine ekleyip takibe alabilir ve daha önce gezdiğin konulara hızlıca erişebilirsin.
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.
Şö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.
<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>
DH forumlarında vakit geçirmekten keyif alıyor gibisin ancak giriş yapmadığını görüyoruz.
Üye Ol Şimdi DeğilÜye olduğunda özel mesaj gönderebilir, beğendiğin konuları favorilerine ekleyip takibe alabilir ve daha önce gezdiğin konulara hızlıca erişebilirsin.
_____________________________