Tasarım Kodlama

JavaScript Butona Tıklayınca Renk Değiştirme

Bu yazıda butona tıklayınca yazı rengi ve arka plan rengini değiştirmeyi göstereceğiz. Ayrıca farklı durumları test etmek için bir kaç tane buton ekleyip, tıklanan nesnenin rengini değiştirme, div rengini değiştirme gibi örnekleri de yapacağız.

JavaScript ile renk değiştirme uygulamasına başlamadan önce bir metin editöründe aşağıdaki gibi HTML kodlarını oluşturup ornek.html olarak kaydedin.

 

JavaScript ile buton ve div nesnelerini seçmek için sorgu seçicilerini yazalım.

 

Button 1:  btn1 nesnesine tıkladığımızda div arka plan rengini değiştiren kodu yazalım.

 

Button 2:  btn2  nesnesine tıkladığımızda div yazı rengini değiştiren kodu yazalım.

 

Button 3:  btn3 nesnesine tıkladığımızda rastgele renk oluşturup, div zemin rengini değiştirelim.

 

Button 4:  btn4 nesnesine tıkladığımızda tıklanan butonun rengini değiştiren kodu yazalım.

 

Bu yazıda javascript ile renk değiştirme konusuna ve olabilecek bir çok olasılığa baktık. Diğer buton örnekleri ve javascript örneklerine bakmak javascript menüsüne bakabilirsiniz.

 

6 yorum