Son kullanma tarihi geçmiş, bayatlamış bir tarayıcı kullanıyorsanız, Mercedes kullanmak yerine tosbağaya binmek gibi... Web sitelerini düzgün görüntüleyemiyorsanız eh, bi' zahmet tarayıcınızı güncelleyiniz. Modern Web standartlarını karşılayan bir tarayıcı alternatifine göz atın.
ÇözüldüJavaScript ile radio button'a tıklanınca CSS değiştirme
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)
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.
<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.
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.
<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.
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.
Ş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.
Ş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.
Araştırırken includes metodu ile karşılaştım.
Seçili olanı bir diziye ata daha sonra da dizide olan elemanın arka planını değiştir gibi...
Uğraştım, yapamadım. Siz en başından, sanki sıfırdan kendiniz yazıyor olsaydınız nasıl ilerlerdiniz?
