Teknoloji Haberleri
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
3
Cevap 403
Tıklama 0
Öne Çıkarma
Cevap 403
Tıklama 0
Öne Çıkarma
1. sayfa
-
Javascript guruları gelin 'disable elements'
1. sayfa
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.
<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>