Çözüldü JavaScript ile radio button'a tıklanınca CSS değiştirme

01yildizmustafa dedi:

@bonz

Kod:Panoya kopyala

var labels = document.querySelectorAll("label");
        labels.forEach(function(label){
            label.addEventListener("click", function(){
                if(label.style.backgroundColor = "yellow") {
                    label.style.backgroundColor = "orange";
                }
                else if(label.style.backgroundColor = "orange"){
                    label.style.backgroundColor = "yellow";
                }
            })
        })

Böyle bir şey yaptım ama olmadı.

Genişletmek için tıkla...

01yildizmustafa dedi:

@bonz

Kod:Panoya kopyala

<script>
        // 1. değişiklik yapılacak element grubunu seç.
        // 2. seçtiğin element grubunun her bir elemanına ulaş
        // 3. ulaştığın elemanı dinle
        // 4. gerekli değişikliği yap

        var labels = document.querySelectorAll("label");

        labels.forEach(function(label) {
            label.addEventListener("click", function() {
                if (label.style.backgroundColor = "purple") {
                    label.style.backgroundColor = "green";
                } else {
                    label.style.backgroundColor = "purple"
                }
            })
        })
    </script>

Normalde buton rengi purple. Kullanıcı birine tıkladığında rengi green olucak, oluyor da.
Fakat öteki radio butona tıklanınca ilkinin eski haline yani purple rengine dönmesi gerek.
Else if yerine direk else verdim, olmadı.

Yani anahtar gibi: biri green olduğunda diğeri purple, purple olduğunda öteki green olucak. Aynı anda ikisi aynı renk olmasın.

----------------------------------------------------------------------------------------------------------------------------------------------------------
Sonuç:
İstediğim kutuya tıklayınca rengini değiştirebiliyorum.

Amaç:
Bu kutulardan herhangi birine tıklayınca eğer hali hazırda rengi değişmiş(zaten daha önce tıklanmış) bir kutu varsa o eski rengine dönsün. Yeni tıklanan kutu rengini değiştirsin.

Başından beri amacım yukarıda dediklerim.

Genişletmek için tıkla...

01yildizmustafa dedi:

@bonz

Tam olarak istediğime ulaşamadım, az kaldı.

Şimdi 5 tane kutu var.
Bunlardan birine tıklayınca renk değişiyor = tamam
Şimdi varsayalım "1" numaralı kutuya tıkladım ve rengi değişti.
Şimdi de "4" numaralı kutuya tıkladım, onun da rengi değişti.
4 numaralının rengi değişirken "1" numaralı kutunun eski haline dönmesi gerek.
Yani kullanıcı 5 tane kutu içinden aynı anda birden fazla kutunun rengini değiştiremez.

Genişletmek için tıkla...

01yildizmustafa dedi:

@bonz

Hayır.
Yeniyim.
Js ile yapmaya çalıştığım 2. proje bu.
Bilmiyorum ama toggle() nasıl olur?

Genişletmek için tıkla...

bonz dedi:

Hiç sormadan deneyin bence. Hemen YouTube'a JavaScript contains yazın, 5 dakika da anlatırlar o yöntem ile yapmayı deneyebilirsiniz.

Genişletmek için tıkla...

<script>
        var labels = document.querySelectorAll("label");


        labels.forEach(function(label) {

            label.addEventListener("click", function() {

                labels.forEach (function(label) {
                    label.style.backgroundColor = "purple";
                })

                label.style.backgroundColor = "red";
            })
        })
    </script>