Java Script Buttton Project

Only One Shohaib August 18, 2020 0

Java Script Buttton Project

Code....

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Java project</title>
    <style>
body{
    background:black ;
}
.sc{
    background: #ff523b;
}
.dn{
    background: #23ff6c;
}
.in{
    background: #6d1fff;
}
    </style>
</head>
<body id="bb">


<div class="btnWrapper">
<button class="btn btn-success">success</button>
<button class="btn btn-denger">denger</button>
<button class="btn btn-info">info</button>


<h1 id="desable">hiii!!!</h1>

</div>

    <script>
document.querySelector(".btn-success").addEventListener('click',function(){
    document.querySelector("#bb").classList.add("sc")
    document.querySelector("#bb").classList.remove("dn")
    document.querySelector("#bb").classList.remove("in")
    document.querySelector("#desable").setAttribute("style","color:red")
});
document.querySelector(".btn-denger").addEventListener('click',function(){
    document.querySelector("#bb").classList.add("dn")
    document.querySelector("#bb").classList.remove("in")
    document.querySelector("#bb").classList.remove("sc")
    document.querySelector("#desable").setAttribute("style","color:black")
});
document.querySelector(".btn-info").addEventListener('click',function(){
    document.querySelector("#bb").classList.add("in")
    document.querySelector("#bb").classList.remove("dn")
    document.querySelector("#bb").classList.remove("sc")
    document.querySelector("#desable").setAttribute("style","color:#fff")
});




//desable alll button

// document.querySelector("#desable").addEventListener('click', function(){
//     document.querySelector("#desable").setAttribute("disabled","disabled")
// });




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

No comments

Subscribe to: Post Comments ( Atom )