JavaScript Button Tıklandığında Renk Değiştirme

Bu JavaScript örneğinde sayfamıza eklediğimiz butona tıkladığımızda sayfada bulunan başlığın rengini değiştireceğiz.

Kodlarımız ve ekran çıktısı:


<!DOCTYPE html>
<html>
<body>

<h1 id="id1">algoritmaornekleri.com<h1>
<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
TIKLA</button>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1 id="id1">algoritmaornekleri.com<h1>

<button type="button"

onclick="document.getElementById('id1').style.color = 'red'">

TIKLA</button>

</body>

</html>

Buton tıklayınca arka plan rengini rastgele değiştirme


<!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 Rengi Değiştirme</button>
        <div id="kutu">
            Merhaba Dünya
        </div>

    <script>
        
        var btn1=document.querySelector("#btn1");
        
        btn1.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;
        }
           
    </script>
    </body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<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 Rengi Değiştirme</button>

Merhaba Dünya

</div>

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

btn1.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;

}

</script>

</body>

</html>

JavaScript Button Tıklandığında Renk Değiştirme

Buton tıklayınca arka plan rengini rastgele değiştirme

İlgili

1 Yorum

Yorum yap X

Buton tıklayınca arka plan rengini rastgele değiştirme

Bunu paylaş:

İlgili

İlginizi Çekebilir

1 Yorum

Yorum yap X