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.


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tasarım Kodlama</title>
        <style>
            #kutu{
                width: 200px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                font-size:20px;
                font-family: sans-serif;
                font-weight: bold;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <br>
        <button id="btn1">Zemin Kırmızı Yap</button>
        <button id="btn2">Yazıyı Beyaz Yap </button>
        <button id="btn3">Rastgele Renk</button>
        <button id="btn4">bu butonun rengini değiştir</button>
        <div id="kutu">
            Merhaba Dünya
        </div>

    <script>
        
    </script>
    </body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Tasarım Kodlama</title>

<style>

#kutu{

width: 200px;

height: 100px;

line-height: 100px;

text-align: center;

font-size:20px;

font-family: sans-serif;

font-weight: bold;

margin: 5px;

}

</style>

</head>

<body>

<br>

<button id="btn1">Zemin Kırmızı Yap</button>

<button id="btn2">Yazıyı Beyaz Yap </button>

<button id="btn3">Rastgele Renk</button>

<button id="btn4">bu butonun rengini değiştir</button>

Merhaba Dünya

</div>

</script>

</body>

</html>

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


        var btn1=document.querySelector("#btn1");
        var btn2=document.querySelector("#btn2");
        var btn3=document.querySelector("#btn3");
        var btn4=document.querySelector("#btn4");
        var kutu=document.querySelector("#kutu");

var btn1=document.querySelector("#btn1");

var btn2=document.querySelector("#btn2");

var btn3=document.querySelector("#btn3");

var btn4=document.querySelector("#btn4");

var kutu=document.querySelector("#kutu");

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


        btn1.onclick=function(){
            kutu.style.background="#ff0000";//div zemin rengini kırmızı yap
        }

btn1.onclick=function(){

kutu.style.background="#ff0000";//div zemin rengini kırmızı yap

}

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


        btn2.onclick=function(){
            kutu.style.color="#ffffff";//div yazı rengini beyaz yap
        }

btn2.onclick=function(){

kutu.style.color="#ffffff";//div yazı rengini beyaz yap

}

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


        btn3.onclick=function(){
            
            var kirmizi=Math.floor(Math.random()*255);
            var yesil=Math.floor(Math.random()*255);
            var mavi=Math.floor(Math.random()*255);
            
            var renk=`rgb(${kirmizi} ,${yesil}, ${mavi})`;
            kutu.style.background=renk;
        }

btn3.onclick=function(){

var kirmizi=Math.floor(Math.random()*255);

var yesil=Math.floor(Math.random()*255);

var mavi=Math.floor(Math.random()*255);

var renk=`rgb(${kirmizi} ,${yesil}, ${mavi})`;

kutu.style.background=renk;

}

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


        btn4.onclick=function(){
            this.style.background="red";// tıklanan butonun zemin rengini kırmızı yap
            this.style.color="#ffffff";//tıklanan butonun yazı rengini beyaz yap
        }

btn4.onclick=function(){

this.style.background="red";// tıklanan butonun zemin rengini kırmızı yap

this.style.color="#ffffff";//tıklanan butonun yazı rengini beyaz yap

}

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.


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>TasarimKodlama.com</title>
        <style>
            #kutu{
                width: 200px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                font-size:20px;
                font-family: sans-serif;
                font-weight: bold;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <br>
        <button id="btn1">Zemin Kırmızı Yap</button>
        <button id="btn2">Yazıyı Beyaz Yap </button>
        <button id="btn3">Rastgele Renk</button>
        <button id="btn4">bu butonun rengini değiştir</button>
        <div id="kutu">
            Merhaba Dünya
        </div>

    <script>
        
        var btn1=document.querySelector("#btn1");
        var btn2=document.querySelector("#btn2");
        var btn3=document.querySelector("#btn3");
        var btn4=document.querySelector("#btn4");
        var kutu=document.querySelector("#kutu");
        
        btn1.onclick=function(){
            kutu.style.background="#ff0000";//div yazzeminı rengini kırmızı yap
        }
        
        btn2.onclick=function(){
            kutu.style.color="#ffffff";//div yazı rengini beyaz yap
        }
        
        btn3.onclick=function(){
            
            var kirmizi=Math.floor(Math.random()*255);
            var yesil=Math.floor(Math.random()*255);
            var mavi=Math.floor(Math.random()*255);
            
            var renk=`rgb(${kirmizi} ,${yesil}, ${mavi})`;
            kutu.style.background=renk;
        }
        
        btn4.onclick=function(){
            this.style.background="red";// tıklanan butonun zemin rengini kırmızı yap
            this.style.color="#ffffff";//tıklanan butonun yazı rengini beyaz yap
        }
        
    </script>
    </body>
</html>