JavaScript Onmuseover puanlama ekranı yapma

0

01yildizmustafa

Decapat
Katılım
4 Eylül 2022
Mesajlar
66
Çözümler
2
Daha fazla  
Cinsiyet
Erkek
Kod: 
labels.forEach(function (label) {
    label.onmouseover = function () {
        label.style.backgroundColor = "hsl(25, 97%, 53%)";
    }
})

labels.forEach(function (label) {
    label.addEventListener("click", function () {
        labels.forEach(function (label) {
            label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
        })
        label.style.backgroundColor = "hsl(218, 6%, 39%)";
    })
    labels.forEach(function (label) {
        label.onmouseout = function() {
            label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
        }
    })
})


Yapmak istediğim resimdeki gibidir arkadaşlar.
Ama bir türlü yapamadım.

Butonu CSS ile yaptım.

active-states.jpg
 
Son düzenleme:
Tarihe göre sırala Puana göre sırala
JavaScript: 
labels.forEach(function (label) {
    label.onmouseover = function () {
        label.style.backgroundColor = "hsl(25, 97%, 53%)";
    }
})

Bu attığım kısımı CSS ile yapın. Hover olduğunda verdiğiniz renk gelsin, JavaScript'e gerek yok.

JavaScript: 
labels.forEach(function (label) {
    label.addEventListener("click", function () {
        labels.forEach(function (label) {
            label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
        })
        label.style.backgroundColor = "hsl(218, 6%, 39%)";
    })
    labels.forEach(function (label) {
        label.onmouseout = function() {
            label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
        }
    })
})

Bu kısımda da fazla kod kullanıyorsunuz gerek yok. Dediğim mantıkta yaparsanız kod sayısı azalacaktır o zaman yapabileceğinze inanıyorum.
 
Artı 0 Eksi
@bonz

Kod: 
.puan .number label:hover {
    background-color: hsl(25, 97%, 53%);
    color: white;
}

Fare üzerine gelince hover olayını css ile yapmıştım.
Ama Kullanıcı seçim yaptıktan sonra css hover kodu çalışmıyor.

Son durumum:

Kod: 
.puan .number label:hover {
    background-color: hsl(25, 97%, 53%);
    color: white;
}

Kod: 
labels.forEach(function (label) {
    label.addEventListener("click", function () {
        labels.forEach(function (label) {
            label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
        })
        label.style.backgroundColor = "hsl(218, 6%, 39%)";
    })
})

Bu durumda şu sorun var:

Hover olayı gerçekleşiyor fakat kullanıcı seçim yaptıktan sonra hover çalışmıyor.

@bonz

Kod: 
labels.forEach(function (label) {
    label.onmouseover = function () {
        label.style.backgroundColor = "hsl(25, 97%, 53%)";
    }
    label.onmouseout = function() {
        label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
    }
    label.addEventListener("click", function () {
        labels.forEach(function (label) {
            label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
        })
        label.style.backgroundColor = "hsl(218, 6%, 39%)";
    })
})

Aslında böyle yapınca çözüme biraz daha yaklaşıyorum.
Tek sorun şu kalıyor:

Kullanıcının seçtiği butonun 3. bir renge sahip olmaması.
Ben seçinlen butonun 3. bir renge sahip olmasını istiyorum.
Yani;
  1. Butonların varsayılan rengi = Tamam
  2. Seçilen butonun rengi = Olmadı
  3. Hover olayının rengi = Tamam

@bonz
Yardımcı olabilecek misiniz?
 
Son düzenleme:
Artı 0 Eksi
01yildizmustafa dedi:
@bonz

Kod: 
.puan .number label:hover {
    background-color: hsl(25, 97%, 53%);
    color: white;
}

Fare üzerine gelince hover olayını css ile yapmıştım.
Ama Kullanıcı seçim yaptıktan sonra css hover kodu çalışmıyor.

Son durumum:

Kod: 
.puan .number label:hover {
    background-color: hsl(25, 97%, 53%);
    color: white;
}

Kod: 
labels.forEach(function (label) {
    label.addEventListener("click", function () {
        labels.forEach(function (label) {
            label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
        })
        label.style.backgroundColor = "hsl(218, 6%, 39%)";
    })
})

Bu durumda şu sorun var:

Hover olayı gerçekleşiyor fakat kullanıcı seçim yaptıktan sonra hover çalışmıyor.

@bonz

Kod: 
labels.forEach(function (label) {
    label.onmouseover = function () {
        label.style.backgroundColor = "hsl(25, 97%, 53%)";
    }
    label.onmouseout = function() {
        label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
    }
    label.addEventListener("click", function () {
        labels.forEach(function (label) {
            label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
        })
        label.style.backgroundColor = "hsl(218, 6%, 39%)";
    })
})

Aslında böyle yapınca çözüme biraz daha yaklaşıyorum.
Tek sorun şu kalıyor:

Kullanıcının seçtiği butonun 3. bir renge sahip olmaması.
Ben seçinlen butonun 3. bir renge sahip olmasını istiyorum.
Yani;
  1. Butonların varsayılan rengi = Tamam
  2. Seçilen butonun rengi = Olmadı
  3. Hover olayının rengi = Tamam

@bonz
Yardımcı olabilecek misiniz?
Genişletmek için tıkla...
Biraz karışık bir yapı olmuş. Şuan da aklıma bir şey gelmiyor gerçekten. Stackoverflow gibi yerlere baktınız mı?
 
Artı 0 Eksi

Benzer konular

J
  • Soru
JavaScript  HTML CSS ve JavaScript ile zar oyunu yapılıyor fakat çalışmıyor
Mesaj
4
Görüntüleme
595
Merlin Ambrosius
Merlin Ambrosius
Fueren
HTML, CSS ve JavaScript nasıl geliştirilebilir?
Mesaj
4
Görüntüleme
333
938945
9
AzogTheDefiler
HTML, CSS ve JavaScript öğrenme sırası
Mesaj
5
Görüntüleme
1.306
rofl
rofl
bayzeppeli
HTML, CSS ve JavaScript nasıl öğrenilebilir?
Mesaj
6
Görüntüleme
570
Aspectw1
Aspectw1
F710Kolu
JavaScript ile HTML uyarısı gösterme
Mesaj
3
Görüntüleme
1.042
429106
4

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı