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

01yildizmustafa · 8 Mart 2023

Problem:
Kullanıcı radio butonlardan herhangi birine tıklayınca ilgili elementin arka plan rengini değiştirmek istiyorum.
Fakat hata alıyorum.
(Aldığım hatanın resmini koydum)

GitHub:
Kodlar burada

Yuspro · 8 Mart 2023

label birden fazla element tutan bir obje (NodeList) olduğu için label.addEventListener şeklinde bir kullanım söz konusu değil. Bir döngü ya da forEach() ile label objesinin içindeki elementlere erişip event atayabilirsiniz.

serhatcandev · 9 Mart 2023

Eğer ki birden fazla şeye tıklanılacak ise onları

Kod:

forEach()

olarak girmen gerekiyor. Mesela

JavaScript:

labels.forEach(label) {
    label.addEventListener('click', () => {
        test.classList.add('css')
    })
}

01yildizmustafa · 9 Mart 2023

@serhatcandev

Yeni başladım.
Bir türlü kodu doğru şekilde yazamadım.
İstediğim tam olarak şu:
5 tane radio buton var.
Kullanıcı herhangi birine tıkladığında arka plan rengi değişecek.
Kullanıcı seçimini değiştirince arka plan eski haline gelecek.
Bu sefer yeni seçilen radio butonun arka planı değişecek.

serhatcandev · 9 Mart 2023

01yildizmustafa dedi:
@serhatcandev

Yeni başladım.
Bir türlü kodu doğru şekilde yazamadım.
İstediğim tam olarak şu:
5 tane radio buton var.
Kullanıcı herhangi birine tıkladığında arka plan rengi değişecek.
Kullanıcı seçimini değiştirince arka plan eski haline gelecek.
Bu sefer yeni seçilen radio butonun arka planı değişecek.

Bak şimdi istersen önce normal bir şekilde yapmayı dene. Bir buton aç html'de. JavaScript'de bunu tanımla. Sonrasında ise addEventListener ver. click olduğunda arka plan rengi değişsin. Önce bunu yap sonrasında ise radiobutonları querySelectorAll ile seç ve forEach ile döndürmeyi dene.

01yildizmustafa · 9 Mart 2023

@serhatcandev

Kod:

<script>
 function submit(){
 var buton = document.getElementById("buton");
 buton.addEventListener("click",function(){
 console.log("deneme")
 })

 }
 </script>

GitHub:
Dosya burada

İlerliyorum.
Butona tıklayınca addeventlistener ile konsola çıktı kat sayılarca geliyor.
Yani 3 tane, 10 tane, 15 tane gibi.
Bu neden oluyor?

@serhatcandev

Kod:

<script>
        function submit(){

            var buton = document.getElementById("buton");
            var label = document.getElementById("lbl");

            buton.addEventListener("click",function(){
                label.style.backgroundColor= "red";
            })
            
        }
    </script>

Buraya kadar ilerledim.
Butona 2 kez tıklayınca değişim gerçekleşiyor.

serhatcandev · 9 Mart 2023

01yildizmustafa dedi:
@serhatcandev

Kod:

<script> function submit(){ var buton = document.getElementById("buton"); buton.addEventListener("click",function(){ console.log("deneme") }) } </script>

GitHub:
Dosya burada

İlerliyorum.
Butona tıklayınca addeventlistener ile konsola çıktı kat sayılarca geliyor.
Yani 3 tane, 10 tane, 15 tane gibi.
Bu neden oluyor?

@serhatcandev

Kod:

<script> function submit(){ var buton = document.getElementById("buton"); var label = document.getElementById("lbl"); buton.addEventListener("click",function(){ label.style.backgroundColor= "red"; }) } </script>

Buraya kadar ilerledim.
Butona 2 kez tıklayınca değişim gerçekleşiyor.

İlk defa sizden duydum kat olayını.

01yildizmustafa · 9 Mart 2023

@serhatcandev

Kod:

<script>
                
        var labels = document.querySelectorAll("label");
        labels.forEach(function(label){
            label.addEventListener("click", function(){
                label.style.backgroundColor = "orange";
            })
        })
        
    </script>

değişiklik yapılacak element grubunu seç.
seçtiğin element grubunun her bir elemanına ulaş
ulaştığın elemanı dinle
gerekli değişikliği yap

Tamamdır!
Buraya kadar ilerledim.
Şimdi yapmak istediğim radio butonlardan ötekini seçince öncekinin eski haline gelmesi ve yeni seçilene değişikliklerin uygulanması.

serhatcandev · 9 Mart 2023

01yildizmustafa dedi:
@serhatcandev

Kod:

<script> var labels = document.querySelectorAll("label"); labels.forEach(function(label){ label.addEventListener("click", function(){ label.style.backgroundColor = "orange"; }) }) </script>

değişiklik yapılacak element grubunu seç.

seçtiğin element grubunun her bir elemanına ulaş

ulaştığın elemanı dinle

gerekli değişikliği yap

Tamamdır!
Buraya kadar ilerledim.
Şimdi yapmak istediğim radio butonlardan ötekini seçince öncekinin eski haline gelmesi ve yeni seçilene değişikliklerin uygulanması.

Aynen bak anlattığım şeyi yapmışsın. Şimdi tek yapman gereken if else eklemek. Eğer ki arka plan rengi değişmiş ise else olarak eskiye döndürmesini yani stock yapabilirsin.

01yildizmustafa · 9 Mart 2023

@serhatcandev

Kod:

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ı.

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

Ayrıntılı düzenleme

01yildizmustafa

Centipat

Dosya Ekleri

serhatcandev

Yuspro

Kilopat

serhatcandev

Megapat

01yildizmustafa

Centipat

serhatcandev

Megapat

01yildizmustafa

Centipat

serhatcandev

Megapat

01yildizmustafa

Centipat

serhatcandev

Megapat

01yildizmustafa

Centipat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz