Javascript DOM (Document Object model)

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background: yellow;
            height: 400px;
            width: 400px;
        }
        button{
            margin: 10px;
        }
    </style>
</head>
<body>
<div id="div1">

</div>
Color 1
<button onclick="Red();">Red</button>
<button onclick="Green();">Green</button>
<button onclick="Blue();">Blue</button>
<br>
Color 2
<button onclick="Yellow();">Yellow</button>
<button onclick="Pink();">Pink</button>
<button onclick="Orange();">Orange</button>
</body>

<script>
var divobj=document.getElementById('div1');
var color1="Red";
var color2="yellow";
 divobj.style.background=" linear-gradient("+color1+", "+color2+")";
function Red() {
    color1="Red";
    divobj.style.background=" linear-gradient("+color1+", "+color2+")";
}

function Green() {
    color1="Green";
    divobj.style.background=" linear-gradient("+color1+", "+color2+")";
}

function Blue() {
    color1="Blue";
    divobj.style.background=" linear-gradient("+color1+", "+color2+")";
}

//-----------------color2----------
function Yellow() {
    color2="Yellow";
    divobj.style.background=" linear-gradient("+color1+", "+color2+")";
}

function Pink() {
    color2="pink";
    divobj.style.background=" linear-gradient("+color1+", "+color2+")";
}


function Orange() {
    color2="Orange";
    divobj.style.background=" linear-gradient("+color1+", "+color2+")";
}


</script>
</html>

Comments

Post a Comment